@placeholderco/placeholder-ui 2.1.0 → 2.2.0

package/dist/editors/tiptap/toolbar/UndoButton.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-  import type { Editor } from '@tiptap/core'
-  import ToolbarButton from './ToolbarButton.svelte'
-  import { iconArrowBackUp } from '../../../icon/index.js'
+	import type { Editor } from '@tiptap/core';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { iconArrowBackUp } from '../../../icon/index.js';
 
-  interface Props {
-    editor: Editor
-  }
+	interface Props {
+		editor: Editor;
+	}
 
-  let { editor }: Props = $props()
+	let { editor }: Props = $props();
 </script>
 
 <ToolbarButton
-  icon={iconArrowBackUp}
-  title="Undo"
-  disabled={!editor.can().undo()}
-  onclick={() => editor.chain().focus().undo().run()}
+	icon={iconArrowBackUp}
+	title="Undo"
+	disabled={!editor.can().undo()}
+	onclick={() => editor.chain().focus().undo().run()}
 />

package/dist/form/Autocomplete.svelte

@@ -81,6 +81,7 @@
 <script lang="ts">
 	import ComboBoxMulti from './ComboBoxMulti.svelte';
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 	import Textbox from './Textbox.svelte';
 	import { ComboBoxCore, findItemByValue } from './comboBoxCore.svelte.js';
 	import { tick } from 'svelte';
@@ -258,6 +259,7 @@
 
 	let textboxElement: HTMLElement | undefined = $state(undefined);
 	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined = $state(undefined);
+	let containerElement: HTMLElement | undefined = $state(undefined);
 
 	function onKeyDown(e: KeyboardEvent) {
 		if (!open) {
@@ -289,7 +291,7 @@
 	}
 </script>
 
-<div class="autocomplete-container">
+<div class="autocomplete-container" bind:this={containerElement}>
 	<Textbox
 		{name}
 		type="search"
@@ -316,21 +318,27 @@
 		onfocus={onFocus}
 		onkeydown={onKeyDown}
 	/>
-	<div class="autocomplete-panel {open ? '' : 'hidden'}">
-		<div class="autocomplete-panel-inner" use:clickOutside={closePopover}>
-			<ComboBoxMulti
-				bind:this={comboBoxEl}
-				filterString={value}
-				values={rawValue ? [rawValue] : []}
-				{onSelection}
-				groupedOptions={displayGroups}
-				{open}
-				loading={core.searching}
-				{hideNoResults}
-				{loadingText}
-			/>
+	{#if open}
+		<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
+		<div
+			class="autocomplete-panel"
+			use:floating={{ anchor: () => containerElement, placement: 'bottom-start', matchWidth: true }}
+		>
+			<div class="autocomplete-panel-inner" use:clickOutside={closePopover}>
+				<ComboBoxMulti
+					bind:this={comboBoxEl}
+					filterString={value}
+					values={rawValue ? [rawValue] : []}
+					{onSelection}
+					groupedOptions={displayGroups}
+					{open}
+					loading={core.searching}
+					{hideNoResults}
+					{loadingText}
+				/>
+			</div>
 		</div>
-	</div>
+	{/if}
 </div>
 
 <style>
@@ -338,10 +346,8 @@
 		position: relative;
 	}
 
+	/* Position, width and top-layer promotion come from use:floating */
 	.autocomplete-panel {
-		position: absolute;
-		width: 100%;
-		left: 0;
 		z-index: 70;
 	}
 
@@ -349,8 +355,4 @@
 		position: relative;
 		width: 100%;
 	}
-
-	.hidden {
-		display: none;
-	}
 </style>

package/dist/form/AutocompleteMulti.svelte

@@ -86,6 +86,7 @@
 	import ComboBoxMulti from './ComboBoxMulti.svelte';
 	import FormGroup from './FormGroup.svelte';
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 	import { ComboBoxMultiCore } from './comboBoxCore.svelte.js';
 	import Icon from '../icon/Icon.svelte';
 	import Loader from '../ui/Loader.svelte';
@@ -305,6 +306,7 @@
 
 	let textboxElement: HTMLInputElement | undefined = $state(undefined);
 	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined = $state(undefined);
+	let containerElement: HTMLElement | undefined = $state(undefined);
 
 	function onKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Backspace' && filterValue.length === 0 && rawValues.length > 0) {
@@ -348,7 +350,7 @@
 	});
 </script>
 
-<div class="autocomplete-multi-container {containerClass}">
+<div class="autocomplete-multi-container {containerClass}" bind:this={containerElement}>
 	<FormGroup
 		{label}
 		{required}
@@ -414,21 +416,27 @@
 		</div>
 	</FormGroup>
 
-	<div class="autocomplete-panel {open ? '' : 'hidden'}">
-		<div class="autocomplete-panel-inner" use:clickOutside={closePopover}>
-			<ComboBoxMulti
-				bind:this={comboBoxEl}
-				filterString={filterValue}
-				values={rawValues}
-				{onSelection}
-				groupedOptions={displayGroups}
-				{open}
-				loading={core.searching}
-				{hideNoResults}
-				{loadingText}
-			/>
+	{#if open}
+		<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
+		<div
+			class="autocomplete-panel"
+			use:floating={{ anchor: () => containerElement, placement: 'bottom-start', matchWidth: true }}
+		>
+			<div class="autocomplete-panel-inner" use:clickOutside={closePopover}>
+				<ComboBoxMulti
+					bind:this={comboBoxEl}
+					filterString={filterValue}
+					values={rawValues}
+					{onSelection}
+					groupedOptions={displayGroups}
+					{open}
+					loading={core.searching}
+					{hideNoResults}
+					{loadingText}
+				/>
+			</div>
 		</div>
-	</div>
+	{/if}
 </div>
 
 <style>
@@ -496,10 +504,8 @@
 		line-height: 0;
 	}
 
+	/* Position, width and top-layer promotion come from use:floating */
 	.autocomplete-panel {
-		position: absolute;
-		width: 100%;
-		left: 0;
 		z-index: 70;
 	}
 
@@ -507,8 +513,4 @@
 		position: relative;
 		width: 100%;
 	}
-
-	.hidden {
-		display: none;
-	}
 </style>

package/dist/form/Checkbox.svelte

@@ -63,14 +63,14 @@
 	const autoName = `checkbox-${crypto.randomUUID()}`;
 	const nonce = Math.random().toString(36).substring(2, 15);
 
-	let resolvedName = $derived(
-		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
-	);
+	let resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
 
 	const id = $derived(inputId ? inputId : label ? `input-${label}` : `input-${nonce}`);
 
 	let inputEl = $state<HTMLInputElement>();
-	$effect(() => { if (inputEl) inputEl.indeterminate = indeterminate; });
+	$effect(() => {
+		if (inputEl) inputEl.indeterminate = indeterminate;
+	});
 </script>
 
 <div class="checkbox-container {disabled ? 'disabled' : ''}">

package/dist/form/Chips.svelte

@@ -84,8 +84,6 @@
 			onchange?.(values.length > 0 ? values : undefined);
 		}
 	}
-
-
 </script>
 
 <div class="radio-container {containerClass}">
@@ -102,15 +100,25 @@
 				{@const hasSelection = multiple ? values.length > 0 : value !== undefined}
 				{@const chipVariant = checked
 					? (selectedVariant ?? variant)
-					: (deselectedVariant && (multiple || hasSelection) ? deselectedVariant : variant)}
+					: deselectedVariant && (multiple || hasSelection)
+						? deselectedVariant
+						: variant}
 				<div class="flex">
 					{#if checked}
-						<Button class="chip checked" {disabled} onclick={() => handleChange(option)} svg={iconCheck} iconSize={'16px'} variant={chipVariant}
-							>{option.label}</Button
+						<Button
+							class="chip checked"
+							{disabled}
+							onclick={() => handleChange(option)}
+							svg={iconCheck}
+							iconSize={'16px'}
+							variant={chipVariant}>{option.label}</Button
 						>
 					{:else}
-						<Button class="chip" {disabled} onclick={() => handleChange(option)} variant={chipVariant}
-							>{option.label}</Button
+						<Button
+							class="chip"
+							{disabled}
+							onclick={() => handleChange(option)}
+							variant={chipVariant}>{option.label}</Button
 						>
 					{/if}
 				</div>

package/dist/form/ColorPicker.svelte

@@ -205,6 +205,7 @@
 	import FormGroup from './FormGroup.svelte';
 	import ActionIcon from '../ui/ActionIcon.svelte';
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 	import { iconX, iconPalette } from '../icon/index.js';
 
 	const autoName = `colorpicker-${crypto.randomUUID()}`;
@@ -306,19 +307,10 @@
 
 	// --- Popup -----------------------------------------------------------------
 	let open = $state(false);
-	let dropdownPosition: 'above' | 'below' = $state('below');
 	let triggerEl: HTMLElement | undefined = $state();
 
-	function checkDropdownPosition() {
-		if (!triggerEl) return;
-		const rect = triggerEl.getBoundingClientRect();
-		const spaceBelow = window.innerHeight - rect.bottom;
-		dropdownPosition = spaceBelow < 320 && rect.top > 320 ? 'above' : 'below';
-	}
-
 	function toggle() {
 		if (disabled) return;
-		if (!open) checkDropdownPosition();
 		open = !open;
 	}
 
@@ -511,11 +503,13 @@
 			</div>
 
 			{#if open}
+				<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
 				<div
-					class="panel {dropdownPosition}"
+					class="panel"
 					role="dialog"
 					aria-label="Colour picker"
 					transition:fade={{ duration: 150 }}
+					use:floating={{ anchor: () => triggerEl, placement: 'bottom-start', offset: 4 }}
 					use:clickOutside={onClickOutside}
 				>
 					<div
@@ -773,10 +767,9 @@
 	}
 
 	/* ---- Panel ----------------------------------------------------------- */
+	/* Position and top-layer promotion come from use:floating */
 	.panel {
-		position: absolute;
 		z-index: 10;
-		left: 0;
 		width: 16rem;
 		padding: 0.75rem;
 		display: flex;
@@ -789,14 +782,6 @@
 		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 	}
 
-	.panel.below {
-		top: calc(100% + 0.25rem);
-	}
-
-	.panel.above {
-		bottom: calc(100% + 0.25rem);
-	}
-
 	.sv-area {
 		position: relative;
 		width: 100%;

package/dist/form/ComboBox.svelte

@@ -78,9 +78,7 @@
 		{:else}
 			<div class="combobox-panel">
 				{#each options as option, index}
-					{@const localClasses = [
-						selectedIndex === index ? 'selected p-2' : 'p-2'
-					]}
+					{@const localClasses = [selectedIndex === index ? 'selected p-2' : 'p-2']}
 					<button
 						class="combobox-item {localClasses} {option.class}"
 						class:selected={selectedIndex === index}
@@ -150,7 +148,9 @@
 		padding: 0.5rem;
 	}
 
-	.error, .loading, .no-results {
+	.error,
+	.loading,
+	.no-results {
 		padding: 0.5rem;
 	}
 

package/dist/form/ComboBoxItemBuilder.svelte

@@ -84,16 +84,12 @@
 
 	// Check if a value already exists (excluding a specific index for editing)
 	function valueExists(value: string, excludeIndex: number | undefined = undefined): boolean {
-		return items.some((item, i) =>
-			item.value === value && i !== excludeIndex
-		);
+		return items.some((item, i) => item.value === value && i !== excludeIndex);
 	}
 
 	// Check if a label already exists (excluding a specific index for editing)
 	function labelExists(label: string, excludeIndex: number | undefined = undefined): boolean {
-		return items.some((item, i) =>
-			item.label === label && i !== excludeIndex
-		);
+		return items.some((item, i) => item.label === label && i !== excludeIndex);
 	}
 
 	function removeItem(index: number) {
@@ -103,9 +99,9 @@
 		// Remove from defaults if it was selected and no remaining item shares the value
 		if (
 			defaultValues.includes(removedItem.value) &&
-			!items.some(item => item.value === removedItem.value)
+			!items.some((item) => item.value === removedItem.value)
 		) {
-			defaultValues = defaultValues.filter(v => v !== removedItem.value);
+			defaultValues = defaultValues.filter((v) => v !== removedItem.value);
 		}
 
 		notifyChange();
@@ -115,7 +111,7 @@
 		if (checked) {
 			defaultValues = [...defaultValues, value];
 		} else {
-			defaultValues = defaultValues.filter(v => v !== value);
+			defaultValues = defaultValues.filter((v) => v !== value);
 		}
 		notifyChange();
 	}
@@ -132,21 +128,14 @@
 		// If they were in sync, also update the value to maintain exact match (if it wouldn't create a duplicate)
 		if (wasInSync && (allowDuplicateValues || !valueExists(label, index))) {
 			const oldValue = currentItem.value;
-			items = items.map((item, i) =>
-				i === index ? { ...item, label, value: label } : item
-			);
+			items = items.map((item, i) => (i === index ? { ...item, label, value: label } : item));
 
 			// Update defaults if the value was changed and no remaining item shares the old value
-			if (
-				defaultValues.includes(oldValue) &&
-				!items.some(item => item.value === oldValue)
-			) {
-				defaultValues = defaultValues.map(v => v === oldValue ? label : v);
+			if (defaultValues.includes(oldValue) && !items.some((item) => item.value === oldValue)) {
+				defaultValues = defaultValues.map((v) => (v === oldValue ? label : v));
 			}
 		} else {
-			items = items.map((item, i) =>
-				i === index ? { ...item, label } : item
-			);
+			items = items.map((item, i) => (i === index ? { ...item, label } : item));
 		}
 
 		notifyChange();
@@ -157,16 +146,11 @@
 		if (!allowDuplicateValues && valueExists(newVal, index)) return;
 
 		const oldValue = items[index].value;
-		items = items.map((item, i) =>
-			i === index ? { ...item, value: newVal } : item
-		);
+		items = items.map((item, i) => (i === index ? { ...item, value: newVal } : item));
 
 		// Update defaults if the value was changed and no remaining item shares the old value
-		if (
-			defaultValues.includes(oldValue) &&
-			!items.some(item => item.value === oldValue)
-		) {
-			defaultValues = defaultValues.map(v => v === oldValue ? newVal : v);
+		if (defaultValues.includes(oldValue) && !items.some((item) => item.value === oldValue)) {
+			defaultValues = defaultValues.map((v) => (v === oldValue ? newVal : v));
 		}
 
 		notifyChange();
@@ -186,7 +170,7 @@
 
 	// Computed output for display/copying
 	let outputItems = $derived(
-		items.map(item => ({
+		items.map((item) => ({
 			...item,
 			selected: defaultValues.includes(item.value)
 		}))
@@ -194,9 +178,7 @@
 
 	// Get labels for selected defaults
 	let defaultLabels = $derived(
-		defaultValues
-			.map(v => items.find(i => i.value === v)?.label ?? v)
-			.join(', ')
+		defaultValues.map((v) => items.find((i) => i.value === v)?.label ?? v).join(', ')
 	);
 </script>
 

package/dist/form/ComboBoxMulti.svelte

@@ -103,7 +103,9 @@
 						<div class="group-label">{group.label}</div>
 					{/if}
 					{#each group.items as option, localIndex}
-						{@const globalIndex = groupedOptions.slice(0, groupIndex).reduce((acc, g) => acc + g.items.length, 0) + localIndex}
+						{@const globalIndex =
+							groupedOptions.slice(0, groupIndex).reduce((acc, g) => acc + g.items.length, 0) +
+							localIndex}
 						{@const localClasses = [selectedIndex === globalIndex ? 'selected p-2' : 'p-2']}
 						<button
 							class="combobox-item {localClasses.join(' ')} {option.class}"
@@ -141,7 +143,7 @@
 	} */
 
 	.combobox-multi {
-		position: absolute;
+		position: relative;
 		width: 100%;
 		z-index: 50;
 		border-radius: 0.25rem;
@@ -154,7 +156,9 @@
 
 	.combobox-multi-panel {
 		overflow: auto;
-		max-height: 20rem;
+		/* --ui-floating-max-height is set by the floating action to the room left
+		   on the chosen side, so long lists shrink rather than run off-screen */
+		max-height: min(20rem, var(--ui-floating-max-height, 20rem));
 		border: 1px solid var(--border-color);
 		border-top: none;
 		/* max-h-80 overflow-auto */