@placeholderco/placeholder-ui 2.1.1 → 2.2.0

package/dist/index.js

@@ -1,77 +1,78 @@
-export { default as Accordion } from "./ui/Accordion.svelte";
-export { default as AccordionItem } from "./ui/AccordionItem.svelte";
-export { default as Button } from "./ui/Button.svelte";
-export { default as ActionIcon } from "./ui/ActionIcon.svelte";
-export { default as Badge } from "./ui/Badge.svelte";
-export { default as Dialog } from "./ui/Dialog.svelte";
-export { default as Drawer } from "./ui/Drawer.svelte";
-export { default as Dropdown } from "./ui/Dropdown.svelte";
-export { default as Dropzone } from "./ui/Dropzone.svelte";
-export { default as Link } from "./ui/Link.svelte";
-export { default as Loader } from "./ui/Loader.svelte";
-export { default as Logo } from "./ui/Logo.svelte";
-export { default as Pagination } from "./ui/Pagination.svelte";
-export { default as Popover } from "./ui/Popover.svelte";
-export { default as ContextMenu } from "./ui/ContextMenu.svelte";
-export { default as ProgressBar } from "./ui/ProgressBar.svelte";
-export { default as Tabs } from "./ui/Tabs.svelte";
-export { default as Table } from "./ui/Table.svelte";
-export { default as ThemeSwitcher } from "./ui/ThemeSwitcher.svelte";
-export { default as Sortable } from "./ui/Sortable.svelte";
-export { default as MultiSortable } from "./ui/MultiSortable.svelte";
-export { default as Toaster } from "./ui/Toaster.svelte";
-export { default as Tooltip } from "./ui/Tooltip.svelte";
-export { default as Alert } from "./display/alert/Alert.svelte";
-export { default as LinkCollection } from "./display/LinkCollection.svelte";
-export { default as Navbar } from "./layout/Navbar.svelte";
-export { default as NavbarItemView } from "./layout/NavbarItemView.svelte";
-export { default as CustomNavbar } from "./layout/CustomNavbar.svelte";
-export { default as AppShell } from "./layout/AppShell.svelte";
-export { default as Sidenav } from "./layout/Sidenav.svelte";
-export { default as Paper } from "./display/Paper.svelte";
-export { default as Avatar } from "./display/Avatar.svelte";
-export { default as Autocomplete } from "./form/Autocomplete.svelte";
-export { default as AutocompleteMulti } from "./form/AutocompleteMulti.svelte";
-export { default as Checkbox } from "./form/Checkbox.svelte";
-export { default as ComboBoxItemBuilder } from "./form/ComboBoxItemBuilder.svelte";
-export { default as StringArrayBuilder } from "./form/StringArrayBuilder.svelte";
-export { default as CronBuilder } from "./form/CronBuilder.svelte";
-export { default as DatePicker } from "./form/DatePicker.svelte";
-export { default as DateRangePicker } from "./form/DateRangePicker.svelte";
-export { default as TimePicker } from "./form/TimePicker.svelte";
-export { default as DateTimePicker } from "./form/DateTimePicker.svelte";
-export { default as FormGroup } from "./form/FormGroup.svelte";
-export { default as Number } from "./form/Number.svelte";
-export { default as Radio } from "./form/Radio.svelte";
-export { default as RadioGroup } from "./form/RadioGroup.svelte";
-export { default as Select } from "./form/Select.svelte";
-export { default as SelectMulti } from "./form/SelectMulti.svelte";
-export { default as SegmentedControl } from "./form/SegmentedControl.svelte";
-export { default as TextArea } from "./form/TextArea.svelte";
-export { default as Textbox } from "./form/Textbox.svelte";
-export { default as Slider } from "./form/Slider.svelte";
-export { default as Switch } from "./form/Switch.svelte";
-export { default as Chips } from "./form/Chips.svelte";
-export { default as ColorPicker } from "./form/ColorPicker.svelte";
-export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl, } from "./form/ColorPicker.svelte";
-export { default as TipTap } from "./editors/tiptap/TipTap.svelte";
-export { default as TipTapBubble } from "./editors/tiptap/TipTapBubble.svelte";
-export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage, } from "./editors/tiptap/extensions/index.js";
-export { default as CodeMirror } from "./editors/CodeMirror.svelte";
-export { default as GitCard } from "./cards/GitCard.svelte";
-export * from "./icon/index.js";
-export * from "./models/ComboBoxItem.js";
-export * from "./models/NavbarItem.js";
-export * from "./models/NotifyModel.js";
-export * from "./util/ClickOutside.js";
-export * from "./util/CronParser.js";
-export { dayjs } from "./util/dayjs.js";
-export * from "./util/DateFunctions.js";
-export * from "./util/DragDrop.js";
-export * from "./util/Transitions.js";
-export * from "./util/interceptLinkClick.js";
-export * from "./util/NavigateTo.js";
-export * from "./display/filetree/index.js";
-export * from "./theme.svelte.js";
-export * from "./uiTheme.svelte.js";
-export * from "./ui/Toast.svelte.js";
+export { default as Accordion } from './ui/Accordion.svelte';
+export { default as AccordionItem } from './ui/AccordionItem.svelte';
+export { default as Button } from './ui/Button.svelte';
+export { default as ActionIcon } from './ui/ActionIcon.svelte';
+export { default as Badge } from './ui/Badge.svelte';
+export { default as Dialog } from './ui/Dialog.svelte';
+export { default as Drawer } from './ui/Drawer.svelte';
+export { default as Dropdown } from './ui/Dropdown.svelte';
+export { default as Dropzone } from './ui/Dropzone.svelte';
+export { default as Link } from './ui/Link.svelte';
+export { default as Loader } from './ui/Loader.svelte';
+export { default as Logo } from './ui/Logo.svelte';
+export { default as Pagination } from './ui/Pagination.svelte';
+export { default as Popover } from './ui/Popover.svelte';
+export { default as ContextMenu } from './ui/ContextMenu.svelte';
+export { default as ProgressBar } from './ui/ProgressBar.svelte';
+export { default as Tabs } from './ui/Tabs.svelte';
+export { default as Table } from './ui/Table.svelte';
+export { default as ThemeSwitcher } from './ui/ThemeSwitcher.svelte';
+export { default as Sortable } from './ui/Sortable.svelte';
+export { default as MultiSortable } from './ui/MultiSortable.svelte';
+export { default as Toaster } from './ui/Toaster.svelte';
+export { default as Tooltip } from './ui/Tooltip.svelte';
+export { default as Alert } from './display/alert/Alert.svelte';
+export { default as LinkCollection } from './display/LinkCollection.svelte';
+export { default as Navbar } from './layout/Navbar.svelte';
+export { default as NavbarItemView } from './layout/NavbarItemView.svelte';
+export { default as CustomNavbar } from './layout/CustomNavbar.svelte';
+export { default as AppShell } from './layout/AppShell.svelte';
+export { default as Sidenav } from './layout/Sidenav.svelte';
+export { default as Paper } from './display/Paper.svelte';
+export { default as Avatar } from './display/Avatar.svelte';
+export { default as Autocomplete } from './form/Autocomplete.svelte';
+export { default as AutocompleteMulti } from './form/AutocompleteMulti.svelte';
+export { default as Checkbox } from './form/Checkbox.svelte';
+export { default as ComboBoxItemBuilder } from './form/ComboBoxItemBuilder.svelte';
+export { default as StringArrayBuilder } from './form/StringArrayBuilder.svelte';
+export { default as CronBuilder } from './form/CronBuilder.svelte';
+export { default as DatePicker } from './form/DatePicker.svelte';
+export { default as DateRangePicker } from './form/DateRangePicker.svelte';
+export { default as TimePicker } from './form/TimePicker.svelte';
+export { default as DateTimePicker } from './form/DateTimePicker.svelte';
+export { default as FormGroup } from './form/FormGroup.svelte';
+export { default as Number } from './form/Number.svelte';
+export { default as Radio } from './form/Radio.svelte';
+export { default as RadioGroup } from './form/RadioGroup.svelte';
+export { default as Select } from './form/Select.svelte';
+export { default as SelectMulti } from './form/SelectMulti.svelte';
+export { default as SegmentedControl } from './form/SegmentedControl.svelte';
+export { default as TextArea } from './form/TextArea.svelte';
+export { default as Textbox } from './form/Textbox.svelte';
+export { default as Slider } from './form/Slider.svelte';
+export { default as Switch } from './form/Switch.svelte';
+export { default as Chips } from './form/Chips.svelte';
+export { default as ColorPicker } from './form/ColorPicker.svelte';
+export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl } from './form/ColorPicker.svelte';
+export { default as TipTap } from './editors/tiptap/TipTap.svelte';
+export { default as TipTapBubble } from './editors/tiptap/TipTapBubble.svelte';
+export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export { default as CodeMirror } from './editors/CodeMirror.svelte';
+export { default as GitCard } from './cards/GitCard.svelte';
+export * from './icon/index.js';
+export * from './models/ComboBoxItem.js';
+export * from './models/NavbarItem.js';
+export * from './models/NotifyModel.js';
+export * from './util/ClickOutside.js';
+export * from './util/Floating.js';
+export * from './util/CronParser.js';
+export { dayjs } from './util/dayjs.js';
+export * from './util/DateFunctions.js';
+export * from './util/DragDrop.js';
+export * from './util/Transitions.js';
+export * from './util/interceptLinkClick.js';
+export * from './util/NavigateTo.js';
+export * from './display/filetree/index.js';
+export * from './theme.svelte.js';
+export * from './uiTheme.svelte.js';
+export * from './ui/Toast.svelte.js';

package/dist/layout/CustomNavbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	
+
 	export interface CustomNavbarProps {
 		/** Header text for the mobile drawer */
 		drawerHeader?: string | undefined;

package/dist/layout/NavbarItemDisplay.svelte

@@ -27,4 +27,4 @@
             {/if}
         </div>
     {/if}
-    </div> -->
+    </div> -->

package/dist/layout/NavbarItemView.svelte

@@ -61,7 +61,9 @@
 			<div
 				class="navbar-submenu"
 				class:flyout={depth > 0}
-				style={item.submenuWidth ? `width: ${item.submenuWidth}; min-width: ${item.submenuWidth};` : ''}
+				style={item.submenuWidth
+					? `width: ${item.submenuWidth}; min-width: ${item.submenuWidth};`
+					: ''}
 				onclick={(e) => {
 					// Close the fold-out once an actual link is chosen (but not when toggling a nested parent)
 					if ((e.target as HTMLElement).closest('a')) close();

package/dist/layout/Sidenav.svelte

@@ -471,7 +471,7 @@
 		border-top: 1px solid var(--border-color);
 		border-bottom: 1px solid var(--border-color);
 	}
-	
+
 	.section-title:first-child {
 		border-top: none;
 	}

package/dist/models/ComboBoxItem.d.ts

@@ -1,4 +1,4 @@
-import type { NotifyModel } from "./NotifyModel.js";
+import type { NotifyModel } from './NotifyModel.js';
 export interface ComboBoxGroup {
     label: string;
     items: ComboBoxItem[];
@@ -20,6 +20,6 @@ export interface ComboBoxItem {
     /** Marks a synthetic "add new value" suggestion (see Autocomplete) */
     isAddNew?: boolean;
 }
-export type FetchFunctionType = (() => Promise<NotifyModel<ComboBoxItem[]>>);
-export type SearchFunctionType = ((query: string) => Promise<NotifyModel<ComboBoxItem[]>>);
-export type RetrieveLabelFunctionType = ((value: any) => Promise<NotifyModel<string | undefined>>);
+export type FetchFunctionType = () => Promise<NotifyModel<ComboBoxItem[]>>;
+export type SearchFunctionType = (query: string) => Promise<NotifyModel<ComboBoxItem[]>>;
+export type RetrieveLabelFunctionType = (value: any) => Promise<NotifyModel<string | undefined>>;

package/dist/models/NotifyModel.js

@@ -6,4 +6,3 @@ export var MessageTypes;
     MessageTypes["notFound"] = "NotFound";
     MessageTypes["accessDenied"] = "AccessDenied";
 })(MessageTypes || (MessageTypes = {}));
-;

package/dist/theme.svelte.d.ts

@@ -1,4 +1,4 @@
-type Theme = "system" | "light" | "dark";
+type Theme = 'system' | 'light' | 'dark';
 export declare const breakpoints: {
     readonly sm: 640;
     readonly md: 768;

package/dist/theme.svelte.js

@@ -4,12 +4,12 @@ const browser = typeof window !== 'undefined' && typeof document !== 'undefined'
 // Theme State
 // ============================================
 // Svelte 5 runes for reactive state
-let theme = $state("system");
+let theme = $state('system');
 let systemDarkMode = $state(browser && isSystemDarkMode());
 let isDarkMode = $derived.by(() => {
-    if (theme === "system")
+    if (theme === 'system')
         return systemDarkMode;
-    return theme === "dark";
+    return theme === 'dark';
 });
 // Initialize theme on module load (browser only - SSR has no localStorage/document)
 if (browser)
@@ -18,8 +18,8 @@ if (browser)
 if (browser && window.matchMedia) {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
         systemDarkMode = e.matches;
-        if (theme === "system")
-            applyThemeClass(e.matches ? "dark" : "light");
+        if (theme === 'system')
+            applyThemeClass(e.matches ? 'dark' : 'light');
     });
 }
 // ============================================
@@ -55,20 +55,44 @@ if (typeof window !== 'undefined') {
 }
 // Export reactive viewport state object
 export const viewportState = {
-    get width() { return windowWidth; },
-    get height() { return windowHeight; },
+    get width() {
+        return windowWidth;
+    },
+    get height() {
+        return windowHeight;
+    },
     // Boolean helpers
-    get isMobile() { return isMobile; },
-    get isTablet() { return isTablet; },
-    get isDesktop() { return isDesktop; },
-    get isSmall() { return isSmall; },
-    get isMedium() { return isMedium; },
-    get isLarge() { return isLarge; },
-    get isExtraLarge() { return isExtraLarge; },
-    get isUltrawide() { return isUltrawide; },
+    get isMobile() {
+        return isMobile;
+    },
+    get isTablet() {
+        return isTablet;
+    },
+    get isDesktop() {
+        return isDesktop;
+    },
+    get isSmall() {
+        return isSmall;
+    },
+    get isMedium() {
+        return isMedium;
+    },
+    get isLarge() {
+        return isLarge;
+    },
+    get isExtraLarge() {
+        return isExtraLarge;
+    },
+    get isUltrawide() {
+        return isUltrawide;
+    },
     // Utility function for custom breakpoints
-    isBelow(breakpoint) { return windowWidth < breakpoint; },
-    isAbove(breakpoint) { return windowWidth >= breakpoint; }
+    isBelow(breakpoint) {
+        return windowWidth < breakpoint;
+    },
+    isAbove(breakpoint) {
+        return windowWidth >= breakpoint;
+    }
 };
 // Export getter for the theme state
 export function getTheme() {
@@ -86,7 +110,7 @@ export const themeState = {
 export function loadTheme() {
     if (!browser)
         return;
-    const themeString = localStorage.getItem("theme") || "system";
+    const themeString = localStorage.getItem('theme') || 'system';
     if (themeString == 'light')
         setTheme('light');
     else if (themeString == 'dark')
@@ -96,9 +120,9 @@ export function loadTheme() {
 }
 export function setTheme(newTheme) {
     let appliedTheme;
-    if (newTheme === "system") {
+    if (newTheme === 'system') {
         systemDarkMode = isSystemDarkMode();
-        appliedTheme = systemDarkMode ? "dark" : "light";
+        appliedTheme = systemDarkMode ? 'dark' : 'light';
     }
     else {
         appliedTheme = newTheme;
@@ -108,13 +132,13 @@ export function setTheme(newTheme) {
     if (!browser)
         return;
     applyThemeClass(appliedTheme);
-    localStorage.setItem("theme", newTheme);
+    localStorage.setItem('theme', newTheme);
 }
 function applyThemeClass(appliedTheme) {
     if (!browser)
         return;
     const classList = document.documentElement.classList;
-    classList.remove("light", "dark");
+    classList.remove('light', 'dark');
     classList.add(appliedTheme);
 }
 function isSystemDarkMode() {

package/dist/ui/Accordion.svelte

@@ -59,9 +59,7 @@
 		children
 	}: AccordionProps = $props();
 
-	const openValues = $derived(
-		Array.isArray(value) ? value : value ? [value] : []
-	);
+	const openValues = $derived(Array.isArray(value) ? value : value ? [value] : []);
 
 	function isOpen(itemValue: string): boolean {
 		return openValues.includes(itemValue);

package/dist/ui/Badge.svelte

@@ -43,12 +43,12 @@
 	let isDisabled: boolean = $derived(loading || disabled);
 	let type: 'a' | 'button' | 'div' = $derived(onClick ? 'button' : href ? 'a' : 'div');
 
-	const elClass = $derived(
-		`badge ${isDisabled ? 'disabled' : ''}`
-	);
+	const elClass = $derived(`badge ${isDisabled ? 'disabled' : ''}`);
 </script>
 
-<div class="badge-container {variant} shape-{shape} size-{size} {onDelete ? 'badge-with-button' : ''} ">
+<div
+	class="badge-container {variant} shape-{shape} size-{size} {onDelete ? 'badge-with-button' : ''} "
+>
 	{#if type == 'a' && !disabled}
 		<a class={elClass} {href} {target}> {@render children?.()}</a>
 	{:else if type == 'button'}
@@ -334,5 +334,4 @@
 	.size-lg .badge-button {
 		padding: 6px;
 	}
-
 </style>

package/dist/ui/Button.svelte

@@ -87,7 +87,13 @@
 {/snippet}
 
 {#if isLink && href && !disabled}
-	<a {target} class={elClass} aria-label={ariaLabel} href={href?.startsWith('/') ? resolve(href as any) : href} onclick={(e) => interceptLinkClick(e, { href, target, onclick })}>
+	<a
+		{target}
+		class={elClass}
+		aria-label={ariaLabel}
+		href={href?.startsWith('/') ? resolve(href as any) : href}
+		onclick={(e) => interceptLinkClick(e, { href, target, onclick })}
+	>
 		{@render buttonContent?.()}
 	</a>
 {:else}

package/dist/ui/ContextMenu.svelte

@@ -38,6 +38,7 @@
 
 <script lang="ts">
 	import ContextMenuList from './ContextMenuList.svelte';
+	import { topLayer } from '../util/Floating.js';
 
 	let {
 		open = $bindable(false),
@@ -54,16 +55,6 @@
 	let posY = $state(0);
 	let placed = $state(false);
 
-	/** Move the menu to <body> so it can't be clipped by overflow/transform ancestors. */
-	function portal(node: HTMLElement) {
-		document.body.appendChild(node);
-		return {
-			destroy() {
-				node.remove();
-			}
-		};
-	}
-
 	function close() {
 		if (!open) return;
 		open = false;
@@ -127,8 +118,11 @@
 
 {#if open}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- Promoted to the top layer so overflow/transform ancestors cannot clip it. Unlike a
+	     body portal, the menu stays inside its subtree, so it remains usable inside a
+	     modal Dialog (everything outside an open modal is inert). -->
 	<div
-		use:portal
+		use:topLayer
 		bind:this={menuEl}
 		class="pui-ctxmenu {classes}"
 		style="left: {posX}px; top: {posY}px; visibility: {placed ? 'visible' : 'hidden'};"

package/dist/ui/Dialog.svelte

@@ -25,7 +25,13 @@
 		title?: string | undefined;
 		/** Render without the Paper wrapper component */
 		noPaper?: boolean;
-		/** Prevent content from overflowing the dialog bounds */
+		/**
+		 * Let content overflow the dialog bounds instead of scrolling inside it.
+		 * The body scrolls by default; dropdowns, pickers and tooltips render in
+		 * the browser's top layer, so they are never clipped by that scroll.
+		 */
+		allowOverflow?: boolean;
+		/** @deprecated Scrolling is now the default; use `allowOverflow` to opt out. */
 		preventOverflow?: boolean;
 		/** Size preset for the dialog width */
 		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
@@ -42,6 +48,7 @@
 		allowImplicitClose = true,
 		title = undefined,
 		noPaper = false,
+		allowOverflow = false,
 		preventOverflow = false,
 		size = 'md',
 		class: classes = '',
@@ -50,6 +57,12 @@
 	}: DialogProps = $props();
 
 	const uid = $props.id();
+
+	// preventOverflow is the legacy opt-in for the behaviour that is now default,
+	// so it wins over allowOverflow when both are set
+	const overflowClass = $derived(
+		allowOverflow && !preventOverflow ? 'overflow-visible' : 'overflow-y-auto'
+	);
 	const titleId = `${uid}-title`;
 
 	let dialogElement: HTMLDialogElement | undefined = $state(undefined);
@@ -142,7 +155,7 @@
 			{/if}
 		</div>
 	{/if}
-	<div class="dialog-body {preventOverflow ? 'overflow-y-auto' : 'overflow-visible'}">
+	<div class="dialog-body {overflowClass}">
 		{@render children?.()}
 	</div>
 	{#if footer}
@@ -169,7 +182,7 @@
 		{#if noPaper}
 			{@render DialogInner()}
 		{:else}
-			<div class="dialog-paper {preventOverflow ? 'overflow-y-auto' : 'overflow-visible'}">
+			<div class="dialog-paper {overflowClass}">
 				<Paper containerClass={classes}>
 					{@render DialogInner()}
 				</Paper>

package/dist/ui/Dialog.svelte.d.ts

@@ -18,7 +18,13 @@ export interface DialogProps {
     title?: string | undefined;
     /** Render without the Paper wrapper component */
     noPaper?: boolean;
-    /** Prevent content from overflowing the dialog bounds */
+    /**
+     * Let content overflow the dialog bounds instead of scrolling inside it.
+     * The body scrolls by default; dropdowns, pickers and tooltips render in
+     * the browser's top layer, so they are never clipped by that scroll.
+     */
+    allowOverflow?: boolean;
+    /** @deprecated Scrolling is now the default; use `allowOverflow` to opt out. */
     preventOverflow?: boolean;
     /** Size preset for the dialog width */
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';

package/dist/ui/Dropdown.svelte

@@ -5,6 +5,8 @@
 	import type { Hyperlink } from '../models/Hyperlink.js';
 	import LinkCollection from '../display/LinkCollection.svelte';
 	import { iconChevronDown } from '../icon/index.js';
+	import { floating } from '../util/Floating.js';
+	import { clickOutside } from '../util/ClickOutside.js';
 
 	export interface DropdownProps {
 		/** Whether the dropdown is expanded (bindable) */
@@ -32,16 +34,32 @@
 		class: classes = '',
 		alignToButton = 'left'
 	}: DropdownProps = $props();
+
+	let triggerElement: HTMLElement | undefined = $state(undefined);
 </script>
 
-<div class="dropdown {classes} {alignToButton}">
+<!-- The floating content is still a DOM descendant of this wrapper (only its rendering
+     moves to the top layer), so a contains() check covers both the button and the menu -->
+<div
+	class="dropdown {classes} {alignToButton}"
+	bind:this={triggerElement}
+	use:clickOutside={() => (show = false)}
+>
 	<Button class="ps-2" {variant} svg={buttonSvg} onclick={() => (show = !show)}>
 		{label}
 	</Button>
 	{#if show}
+		<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="dropdown-content" onclick={(e) => e.stopPropagation()}>
+		<div
+			class="dropdown-content"
+			use:floating={{
+				anchor: () => triggerElement,
+				placement: alignToButton === 'right' ? 'bottom-end' : 'bottom-start'
+			}}
+			onclick={(e) => e.stopPropagation()}
+		>
 			{#if links.length > 0 && Array.isArray(links[0])}
 				{#each links as group}
 					<div class="dropdown-group">
@@ -60,10 +78,8 @@
 		position: relative;
 	}
 
+	/* Position and top-layer promotion come from use:floating */
 	.dropdown-content {
-		position: absolute;
-		top: 100%;
-		left: 0;
 		background-color: var(--paper-body-bg);
 		min-width: 160px;
 		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
@@ -94,11 +110,6 @@
 		background-color: var(--border-color);
 	}
 
-	.dropdown.right .dropdown-content {
-		left: auto;
-		right: 0;
-	}
-
 	:global(.dark) {
 		.dropdown-content :global(a) {
 			color: var(--ui-accent);

package/dist/ui/MultiSortable.svelte

@@ -114,9 +114,7 @@
 		if (!accepts(ctx)) return;
 		const host = container;
 		if (!host) return;
-		const itemEls = Array.from(
-			host.querySelectorAll<HTMLElement>(':scope > .pui-msortable-item')
-		);
+		const itemEls = Array.from(host.querySelectorAll<HTMLElement>(':scope > .pui-msortable-item'));
 		if (itemEls.length === 0) {
 			dropIndex = null;
 			return;

package/dist/ui/Pagination.svelte

@@ -48,7 +48,7 @@
 		// For maxPageButtons, we need to fit: first, last, and some middle pages + ellipsis
 		// Reserve 2 slots for first and last pages, leaving maxPageButtons - 2 for middle + ellipsis
 		const middleSlots = maxPageButtons - 2;
-		
+
 		// Calculate how many pages we can show around the selected page
 		const sidePages = Math.floor((middleSlots - 1) / 2); // -1 to account for potential ellipsis
 
@@ -134,7 +134,7 @@
 		display: flex;
 		justify-content: center;
 	}
-	
+
 	:global(.dark) .pagination-container :global(.paginate-button.secondary-selected) {
 		color: black;
 	}