@placeholderco/placeholder-ui 2.1.1 → 2.2.0

package/dist/ui/Popover.svelte

@@ -3,6 +3,7 @@
 	import type { Snippet } from 'svelte';
 	import Button from './Button.svelte';
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 
 	type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
 	type PopoverTrigger = 'click' | 'hover';
@@ -40,6 +41,7 @@
 		hoverDelay = 1000
 	}: PopoverProps = $props();
 
+	let triggerElement: HTMLElement | undefined = $state(undefined);
 	let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
 	let isHovering = false;
 
@@ -99,7 +101,8 @@
 		{#if button}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-			<button 
+			<button
+				bind:this={triggerElement}
 				onclick={handleClick}
 				onmouseenter={handleMouseEnter}
 				onmouseleave={handleMouseLeave}
@@ -110,6 +113,7 @@
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 			<div
+				bind:this={triggerElement}
 				onmouseenter={handleMouseEnter}
 				onmouseleave={handleMouseLeave}
 			>
@@ -122,8 +126,12 @@
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+			<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it.
+			     data-placement (set by use:floating, after any flip) drives the arrow. -->
 			<div
-				class="popover-content popover-{position}"
+				class="popover-content"
+				data-placement={position}
+				use:floating={{ anchor: () => triggerElement, placement: position, offset: 6 }}
 				onclick={(e) => e.stopPropagation()}
 				onmouseenter={handleContentMouseEnter}
 				onmouseleave={handleContentMouseLeave}
@@ -140,9 +148,9 @@
 		position: relative;
 	}
 
+	/* Position and top-layer promotion come from use:floating */
 	.popover-content {
 		display: block;
-		position: absolute;
 		background-color: var(--paper-body-bg);
 		border: 1px solid var(--border-color);
 		min-width: 160px;
@@ -151,64 +159,35 @@
 		border-radius: 4px;
 	}
 
-	/* Position-specific styles */
-	.popover-bottom {
-		top: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		margin-top: 4px;
-	}
-
-	.popover-top {
-		bottom: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		margin-bottom: 4px;
-	}
-
-	.popover-right {
-		top: 50%;
-		left: 100%;
-		transform: translateY(-50%);
-		margin-left: 4px;
-	}
-
-	.popover-left {
-		top: 50%;
-		right: 100%;
-		transform: translateY(-50%);
-		margin-right: 4px;
-	}
-
-	/* Arrow indicators for each position */
+	/* Arrow indicators for each resolved placement */
 	.popover-content::before {
 		content: '';
 		position: absolute;
 		border: 6px solid transparent;
 	}
 
-	.popover-bottom::before {
+	.popover-content[data-placement='bottom']::before {
 		top: -12px;
 		left: 50%;
 		transform: translateX(-50%);
 		border-bottom-color: var(--border-color);
 	}
 
-	.popover-top::before {
+	.popover-content[data-placement='top']::before {
 		bottom: -12px;
 		left: 50%;
 		transform: translateX(-50%);
 		border-top-color: var(--border-color);
 	}
 
-	.popover-right::before {
+	.popover-content[data-placement='right']::before {
 		top: 50%;
 		left: -12px;
 		transform: translateY(-50%);
 		border-right-color: var(--border-color);
 	}
 
-	.popover-left::before {
+	.popover-content[data-placement='left']::before {
 		top: 50%;
 		right: -12px;
 		transform: translateY(-50%);

package/dist/ui/ProgressBar.svelte

@@ -63,10 +63,7 @@
 			</div>
 		{/each}
 	{:else}
-		<div
-			class="fill {variant} {animated ? 'animated' : ''}"
-			style="width: {clampedValue}%"
-		>
+		<div class="fill {variant} {animated ? 'animated' : ''}" style="width: {clampedValue}%">
 			{#if label}
 				<span class="label">{label}</span>
 			{/if}

package/dist/ui/ThemeSwitcher.svelte

@@ -14,7 +14,8 @@
 		darkVariant?: ButtonVariant;
 	}
 
-	let { lightVariant = 'primary-subtle', darkVariant = 'accent-subtle' }: ThemeSwitcherProps = $props();
+	let { lightVariant = 'primary-subtle', darkVariant = 'accent-subtle' }: ThemeSwitcherProps =
+		$props();
 
 	const themeCycle = ['light', 'dark', 'system'] as const;
 

package/dist/ui/Tooltip.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import { findFixedContainingBlock } from '../util/Floating.js';
 
 	export type TooltipLocation =
 		| 'top'
@@ -140,43 +141,6 @@
 		return Math.max(min, Math.min(value, max));
 	}
 
-	/**
-	 * A transform, filter, perspective, containment or container-type on an ancestor
-	 * makes that ancestor the containing block for `position: fixed` descendants —
-	 * left/top stop meaning "from the viewport" while getBoundingClientRect() keeps
-	 * reporting viewport coordinates. Dialog hits this: its open animation uses a
-	 * `forwards` fill, which leaves `transform: translateY(0)` applied while open.
-	 */
-	function findFixedContainingBlock(element: HTMLElement): HTMLElement | null {
-		let node = element.parentElement;
-
-		while (node) {
-			const style = getComputedStyle(node);
-			// Newer properties go through getPropertyValue so an older DOM lib (or a
-			// browser without support) reports '' instead of failing to compile.
-			const containerType = style.getPropertyValue('container-type');
-			const backdropFilter =
-				style.getPropertyValue('backdrop-filter') ||
-				style.getPropertyValue('-webkit-backdrop-filter');
-
-			if (
-				style.transform !== 'none' ||
-				style.perspective !== 'none' ||
-				style.filter !== 'none' ||
-				(backdropFilter !== '' && backdropFilter !== 'none') ||
-				(containerType !== '' && containerType !== 'normal') ||
-				/\b(paint|layout|strict|content)\b/.test(style.contain) ||
-				/\b(transform|perspective|filter)\b/.test(style.willChange)
-			) {
-				return node;
-			}
-
-			node = node.parentElement;
-		}
-
-		return null;
-	}
-
 	/** Viewport coordinates of the origin that left/top are measured from. */
 	function containingBlockOrigin(): { x: number; y: number } {
 		if (!fixedContainer) return { x: 0, y: 0 };

package/dist/util/DateFunctions.js

@@ -1,4 +1,4 @@
-import dayjs from "./dayjs.js";
+import dayjs from './dayjs.js';
 export function getDateInXTimeAgo(date) {
     const d = dayjs(date);
     const now = dayjs();

package/dist/util/Floating.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Floating panel positioning for dropdowns, pickers and popovers.
+ *
+ * Panels are promoted to the browser's top layer with the Popover API
+ * (`popover="manual"` + `showPopover()`), so they are never clipped by an
+ * `overflow: auto` ancestor — a scrolling Dialog body in particular — and they
+ * paint above modal dialogs without any z-index coordination. The panel stays
+ * where it is in the DOM, so focus, keyboard handling and click-outside logic
+ * keep working; only rendering moves.
+ *
+ * Browsers without the Popover API fall back to `position: fixed`, correcting
+ * for any transformed ancestor that would otherwise become the containing block.
+ */
+export type FloatingSide = 'top' | 'bottom' | 'left' | 'right';
+export type FloatingAlignment = 'start' | 'end';
+export type FloatingPlacement = FloatingSide | `${FloatingSide}-${FloatingAlignment}`;
+export interface FloatingOptions {
+    /** Element the panel is positioned against. A getter defers resolution until layout. */
+    anchor: HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
+    /** Preferred side and alignment relative to the anchor. Default `bottom-start`. */
+    placement?: FloatingPlacement;
+    /** Gap between anchor and panel in px. Default 0. */
+    offset?: number;
+    /** Give the panel the anchor's width. Default false. */
+    matchWidth?: boolean;
+    /** Flip to the opposite side when the preferred side has no room. Default true. */
+    flip?: boolean;
+    /** Slide along the anchor's edge to stay inside the viewport. Default true. */
+    shift?: boolean;
+    /** Minimum distance from the viewport edges in px. Default 8. */
+    padding?: number;
+    /** Notified with the resolved placement after each positioning pass. */
+    onPlacement?: (placement: FloatingPlacement) => void;
+}
+export declare function supportsPopover(): boolean;
+/**
+ * Promote an element to the top layer for as long as it is mounted. The element
+ * keeps its DOM position; only its rendering escapes overflow and transform
+ * ancestors. Falls back to `position: fixed` where the Popover API is missing.
+ */
+export declare function topLayer(node: HTMLElement): {
+    destroy(): void;
+};
+/**
+ * A transform, filter, perspective, containment or container-type on an ancestor
+ * makes that ancestor the containing block for `position: fixed` descendants.
+ * Dialog hits this: its open animation uses a `forwards` fill, leaving a
+ * transform applied while open. Only relevant to the non-popover fallback —
+ * top-layer elements always resolve against the viewport.
+ */
+export declare function findFixedContainingBlock(element: HTMLElement): HTMLElement | null;
+/**
+ * Svelte action: keep `node` anchored to another element while it is mounted.
+ *
+ * ```svelte
+ * {#if open}
+ *   <div use:floating={{ anchor: () => triggerEl, placement: 'bottom-start', matchWidth: true }}>
+ *     ...
+ *   </div>
+ * {/if}
+ * ```
+ *
+ * The node receives `data-placement` with the resolved placement (after any
+ * flip) and a `--ui-floating-max-height` custom property holding the space
+ * available on the chosen side, which descendants can use to cap their height.
+ */
+export declare function floating(node: HTMLElement, options: FloatingOptions): {
+    update(next: FloatingOptions): void;
+    destroy(): void;
+};

package/dist/util/Floating.js

@@ -0,0 +1,321 @@
+/**
+ * Floating panel positioning for dropdowns, pickers and popovers.
+ *
+ * Panels are promoted to the browser's top layer with the Popover API
+ * (`popover="manual"` + `showPopover()`), so they are never clipped by an
+ * `overflow: auto` ancestor — a scrolling Dialog body in particular — and they
+ * paint above modal dialogs without any z-index coordination. The panel stays
+ * where it is in the DOM, so focus, keyboard handling and click-outside logic
+ * keep working; only rendering moves.
+ *
+ * Browsers without the Popover API fall back to `position: fixed`, correcting
+ * for any transformed ancestor that would otherwise become the containing block.
+ */
+const CLASS = 'ui-floating';
+const STYLE_ID = 'ui-floating-style';
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+};
+export function supportsPopover() {
+    return typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
+}
+/**
+ * Zero-specificity resets (`:where`) so component styles on the panel always win.
+ * The UA stylesheet gives `[popover]` a centred inset, a border, padding and a
+ * canvas background; all of that is undone here so the panel looks exactly as
+ * it did before being promoted.
+ */
+function ensureStyles() {
+    if (typeof document === 'undefined' || document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+:where(.${CLASS}) { position: fixed; top: 0; left: 0; }
+:where(.${CLASS}[popover]) {
+	inset: auto; margin: 0; padding: 0; border: none;
+	background: transparent; color: inherit; overflow: visible;
+	width: auto; height: auto; max-width: none; max-height: none;
+}
+`;
+    document.head.appendChild(style);
+}
+function isPopoverOpen(node) {
+    try {
+        return node.matches(':popover-open');
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Promote an element to the top layer for as long as it is mounted. The element
+ * keeps its DOM position; only its rendering escapes overflow and transform
+ * ancestors. Falls back to `position: fixed` where the Popover API is missing.
+ */
+export function topLayer(node) {
+    ensureStyles();
+    node.classList.add(CLASS);
+    const popover = supportsPopover();
+    if (popover) {
+        node.setAttribute('popover', 'manual');
+        try {
+            if (!isPopoverOpen(node))
+                node.showPopover();
+        }
+        catch {
+            /* not connected yet, or already shown */
+        }
+    }
+    return {
+        destroy() {
+            if (popover && node.isConnected && isPopoverOpen(node)) {
+                try {
+                    node.hidePopover();
+                }
+                catch {
+                    /* already hidden */
+                }
+            }
+        }
+    };
+}
+/**
+ * A transform, filter, perspective, containment or container-type on an ancestor
+ * makes that ancestor the containing block for `position: fixed` descendants.
+ * Dialog hits this: its open animation uses a `forwards` fill, leaving a
+ * transform applied while open. Only relevant to the non-popover fallback —
+ * top-layer elements always resolve against the viewport.
+ */
+export function findFixedContainingBlock(element) {
+    let node = element.parentElement;
+    while (node) {
+        if (isPopoverOpen(node))
+            return null;
+        const style = getComputedStyle(node);
+        const containerType = style.getPropertyValue('container-type');
+        const backdropFilter = style.getPropertyValue('backdrop-filter') ||
+            style.getPropertyValue('-webkit-backdrop-filter');
+        if (style.transform !== 'none' ||
+            style.perspective !== 'none' ||
+            style.filter !== 'none' ||
+            (backdropFilter !== '' && backdropFilter !== 'none') ||
+            (containerType !== '' && containerType !== 'normal') ||
+            /\b(paint|layout|strict|content)\b/.test(style.contain) ||
+            /\b(transform|perspective|filter)\b/.test(style.willChange)) {
+            return node;
+        }
+        node = node.parentElement;
+    }
+    return null;
+}
+/** Ancestors that clip their content; scrolling one of them can hide the anchor. */
+function findClippingAncestors(element) {
+    const result = [];
+    let node = element.parentElement;
+    while (node && node !== document.body) {
+        const style = getComputedStyle(node);
+        if (style.overflow !== 'visible' ||
+            style.overflowX !== 'visible' ||
+            style.overflowY !== 'visible') {
+            result.push(node);
+        }
+        node = node.parentElement;
+    }
+    return result;
+}
+/** Whether any part of the anchor is still visible through its clipping ancestors. */
+function anchorIsVisible(rect, clippers) {
+    let { top, bottom, left, right } = rect;
+    for (const clipper of clippers) {
+        const c = clipper.getBoundingClientRect();
+        top = Math.max(top, c.top);
+        bottom = Math.min(bottom, c.bottom);
+        left = Math.max(left, c.left);
+        right = Math.min(right, c.right);
+        if (bottom <= top || right <= left)
+            return false;
+    }
+    return true;
+}
+function containingBlockOrigin(container) {
+    if (!container)
+        return { x: 0, y: 0 };
+    const rect = container.getBoundingClientRect();
+    const style = getComputedStyle(container);
+    // Fixed descendants resolve against the padding box, so drop the border.
+    return {
+        x: rect.left + (parseFloat(style.borderLeftWidth) || 0),
+        y: rect.top + (parseFloat(style.borderTopWidth) || 0)
+    };
+}
+function splitPlacement(placement) {
+    const [side, alignment] = placement.split('-');
+    return [side, alignment];
+}
+function joinPlacement(side, alignment) {
+    return alignment ? `${side}-${alignment}` : side;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+/**
+ * Svelte action: keep `node` anchored to another element while it is mounted.
+ *
+ * ```svelte
+ * {#if open}
+ *   <div use:floating={{ anchor: () => triggerEl, placement: 'bottom-start', matchWidth: true }}>
+ *     ...
+ *   </div>
+ * {/if}
+ * ```
+ *
+ * The node receives `data-placement` with the resolved placement (after any
+ * flip) and a `--ui-floating-max-height` custom property holding the space
+ * available on the chosen side, which descendants can use to cap their height.
+ */
+export function floating(node, options) {
+    let opts = options;
+    let rafId = null;
+    let observedAnchor = null;
+    let clippers = [];
+    let clippersFor = null;
+    const layer = topLayer(node);
+    const usingPopover = supportsPopover();
+    // Walking the ancestor chain with getComputedStyle is too costly to repeat on
+    // every scroll frame, so resolve the containing block once per mount.
+    const fixedContainer = usingPopover ? null : findFixedContainingBlock(node);
+    function resolveAnchor() {
+        const a = opts.anchor;
+        const el = typeof a === 'function' ? a() : a;
+        return el ?? null;
+    }
+    function position() {
+        const anchor = resolveAnchor();
+        if (!anchor || !node.isConnected)
+            return;
+        const placement = opts.placement ?? 'bottom-start';
+        const offset = opts.offset ?? 0;
+        const padding = opts.padding ?? 8;
+        const flip = opts.flip ?? true;
+        const shift = opts.shift ?? true;
+        const a = anchor.getBoundingClientRect();
+        // A panel floating in the top layer is not clipped along with its anchor,
+        // so hide it once the anchor is scrolled out of a clipping ancestor (a
+        // Dialog body, for instance) rather than leaving it stranded over the
+        // dialog chrome.
+        if (clippersFor !== anchor) {
+            clippers = findClippingAncestors(anchor);
+            clippersFor = anchor;
+        }
+        node.style.visibility = anchorIsVisible(a, clippers) ? '' : 'hidden';
+        // Size before measuring so the measured box is the one that gets placed.
+        if (opts.matchWidth)
+            node.style.width = `${a.width}px`;
+        const n = node.getBoundingClientRect();
+        // A zero-sized box means nothing is laid out yet; the ResizeObserver will
+        // call again once content arrives.
+        if (n.width === 0 && n.height === 0)
+            return;
+        // clientWidth/Height exclude scrollbars, which window.innerWidth includes.
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        const [preferredSide, alignment] = splitPlacement(placement);
+        const space = {
+            top: a.top - padding,
+            bottom: vh - a.bottom - padding,
+            left: a.left - padding,
+            right: vw - a.right - padding
+        };
+        const vertical = preferredSide === 'top' || preferredSide === 'bottom';
+        const required = (vertical ? n.height : n.width) + offset;
+        // Flip only when the preferred side cannot fit *and* the opposite side is
+        // roomier; flipping into an equally cramped side just moves the problem.
+        let side = preferredSide;
+        if (flip && space[side] < required && space[OPPOSITE[side]] > space[side]) {
+            side = OPPOSITE[side];
+        }
+        let left = 0;
+        let top = 0;
+        if (side === 'top' || side === 'bottom') {
+            top = side === 'bottom' ? a.bottom + offset : a.top - n.height - offset;
+            if (alignment === 'start')
+                left = a.left;
+            else if (alignment === 'end')
+                left = a.right - n.width;
+            else
+                left = a.left + a.width / 2 - n.width / 2;
+            if (shift)
+                left = clamp(left, padding, Math.max(padding, vw - n.width - padding));
+        }
+        else {
+            left = side === 'right' ? a.right + offset : a.left - n.width - offset;
+            if (alignment === 'start')
+                top = a.top;
+            else if (alignment === 'end')
+                top = a.bottom - n.height;
+            else
+                top = a.top + a.height / 2 - n.height / 2;
+            if (shift)
+                top = clamp(top, padding, Math.max(padding, vh - n.height - padding));
+        }
+        const available = side === 'bottom'
+            ? vh - top - padding
+            : side === 'top'
+                ? a.top - offset - padding
+                : vh - padding * 2;
+        const origin = containingBlockOrigin(fixedContainer);
+        node.style.left = `${Math.round(left - origin.x)}px`;
+        node.style.top = `${Math.round(top - origin.y)}px`;
+        node.style.setProperty('--ui-floating-max-height', `${Math.max(0, Math.floor(available))}px`);
+        const resolved = joinPlacement(side, alignment);
+        if (node.dataset.placement !== resolved) {
+            node.dataset.placement = resolved;
+            opts.onPlacement?.(resolved);
+        }
+    }
+    /** Coalesce bursts of scroll/resize events into one reposition per frame. */
+    function schedule() {
+        if (rafId !== null)
+            return;
+        rafId = requestAnimationFrame(() => {
+            rafId = null;
+            position();
+        });
+    }
+    const observer = new ResizeObserver(() => position());
+    observer.observe(node);
+    function observeAnchor() {
+        const anchor = resolveAnchor();
+        if (anchor === observedAnchor)
+            return;
+        if (observedAnchor)
+            observer.unobserve(observedAnchor);
+        observedAnchor = anchor;
+        if (anchor)
+            observer.observe(anchor);
+    }
+    // Capture phase so scrolling any ancestor container counts, not just the page.
+    window.addEventListener('scroll', schedule, true);
+    window.addEventListener('resize', schedule);
+    observeAnchor();
+    position();
+    return {
+        update(next) {
+            opts = next;
+            observeAnchor();
+            position();
+        },
+        destroy() {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            observer.disconnect();
+            window.removeEventListener('scroll', schedule, true);
+            window.removeEventListener('resize', schedule);
+            layer.destroy();
+        }
+    };
+}

package/dist/util/NavigateTo.js

@@ -1,5 +1,5 @@
-import { goto } from "$app/navigation";
-import { resolve } from "$app/paths";
+import { goto } from '$app/navigation';
+import { resolve } from '$app/paths';
 export function navigateTo(url) {
     goto(resolve(url));
 }

package/dist/util/Transitions.d.ts

@@ -1,4 +1,4 @@
-import type { TransitionConfig } from "svelte/transition";
+import type { TransitionConfig } from 'svelte/transition';
 type FlyAndScaleParams = {
     y?: number;
     x?: number;

package/dist/util/Transitions.js

@@ -1,4 +1,4 @@
-import { cubicOut } from "svelte/easing";
+import { cubicOut } from 'svelte/easing';
 export const flyAndScale = (node, params = { y: -8, x: 0, start: 0.95, duration: 150 }) => {
     const style = getComputedStyle(node);
     const transform = style.transform === 'none' ? '' : style.transform;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",