@x33025/sveltely 0.0.49 → 0.0.52

package/dist/components/Tooltip.svelte

@@ -1,27 +1,79 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
+	import { portalContent } from '../actions/portal';
+	import { computePosition, type Anchor } from '../utils/positioning';
 
 	let {
 		label,
 		class: className = '',
 		disabled = false,
+		anchor = 'top' as Anchor,
 		children,
 		...props
-	}: { label: string; class?: string; disabled?: boolean; children: Snippet } & Record<
-		string,
-		unknown
-	> = $props();
+	}: {
+		label: string;
+		class?: string;
+		disabled?: boolean;
+		anchor?: Anchor;
+		children: Snippet;
+	} & Record<string, unknown> = $props();
+
+	let triggerEl = $state<HTMLElement | null>(null);
+	let tooltipEl = $state<HTMLElement | null>(null);
+	let visible = $state(false);
+	let coords = $state({ top: 0, left: 0 });
+	let transform = $state('none');
+	let resolvedAnchor = $state<Anchor>('top');
+
+	const position = async () => {
+		await tick();
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+		if (!triggerEl || !tooltipEl) return;
+		const result = computePosition(
+			triggerEl.getBoundingClientRect(),
+			tooltipEl.offsetWidth,
+			tooltipEl.offsetHeight,
+			anchor,
+			'center'
+		);
+		coords = { top: result.top, left: result.left };
+		transform = result.transform;
+		resolvedAnchor = result.anchor;
+	};
+
+	const show = () => {
+		if (disabled) return;
+		visible = true;
+		void position();
+	};
+
+	const hide = () => {
+		visible = false;
+	};
 </script>
 
 <span
-	class="tooltip-trigger relative inline-flex items-center {className}"
-	aria-label={!disabled ? label : undefined}
+	bind:this={triggerEl}
+	class="inline-flex items-center {className}"
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocusin={show}
+	onfocusout={hide}
 	{...props}
 >
 	{@render children()}
-	{#if !disabled}
-		<span class="tooltip" role="tooltip">
-			{label}
-		</span>
-	{/if}
 </span>
+
+{#if visible}
+	<div
+		use:portalContent
+		class="tooltip pointer-events-none fixed z-50"
+		data-anchor={resolvedAnchor}
+		style="top: {coords.top}px; left: {coords.left}px; transform: {transform};"
+		role="tooltip"
+		bind:this={tooltipEl}
+	>
+		{label}
+	</div>
+{/if}

package/dist/components/Tooltip.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
+import { type Anchor } from '../utils/positioning';
 type $$ComponentProps = {
     label: string;
     class?: string;
     disabled?: boolean;
+    anchor?: Anchor;
     children: Snippet;
 } & Record<string, unknown>;
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export { default as Sheet } from './components/Sheet';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
-export { default as Dropdown } from './components/Dropdown';
 export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as AsyncButton } from './components/AsyncButton.svelte';

package/dist/index.js

@@ -10,7 +10,6 @@ export { default as Sheet } from './components/Sheet';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
-export { default as Dropdown } from './components/Dropdown';
 export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as AsyncButton } from './components/AsyncButton.svelte';

package/dist/style/index.css

@@ -20,11 +20,11 @@
 	}
 
 	.vstack {
-		@apply flex min-h-0 flex-col;
+		@apply flex min-h-0 min-w-0 flex-col;
 	}
 
 	.hstack {
-		@apply flex min-w-0 flex-row;
+		@apply flex min-h-0 min-w-0 flex-row;
 	}
 
 	.spacer {
@@ -184,28 +184,47 @@
 	}
 
 	.tooltip {
-		@apply pointer-events-none absolute bottom-[calc(100%+6px)] left-1/2 z-10 -translate-x-1/2 rounded-sm bg-black px-2 py-1 text-xs whitespace-nowrap text-white opacity-0;
-	}
-
-	.tooltip-trigger:hover .tooltip,
-	.tooltip-trigger:focus-within .tooltip {
-		@apply opacity-100;
+		@apply rounded-sm bg-black px-2 py-1 text-xs whitespace-nowrap text-white;
 	}
 
 	.tooltip::before {
 		content: '';
 		position: absolute;
-		top: calc(100% - 5px);
-		left: 50%;
-		width: 10px;
-		height: 10px;
-		transform: translateX(-50%) rotate(45deg);
+		width: 8px;
+		height: 8px;
 		background: #000;
-		border-radius: 0;
-		border-bottom-right-radius: 0.125rem;
+		transform: rotate(45deg);
 		z-index: -1;
 	}
 
+	/* Arrow points down (tooltip is above trigger) */
+	.tooltip[data-anchor='top']::before {
+		bottom: -4px;
+		left: 50%;
+		margin-left: -4px;
+	}
+
+	/* Arrow points up (tooltip is below trigger) */
+	.tooltip[data-anchor='bottom']::before {
+		top: -4px;
+		left: 50%;
+		margin-left: -4px;
+	}
+
+	/* Arrow points right (tooltip is to the left of trigger) */
+	.tooltip[data-anchor='leading']::before {
+		right: -4px;
+		top: 50%;
+		margin-top: -4px;
+	}
+
+	/* Arrow points left (tooltip is to the right of trigger) */
+	.tooltip[data-anchor='trailing']::before {
+		left: -4px;
+		top: 50%;
+		margin-top: -4px;
+	}
+
 	.segmented-picker {
 		@apply gap-1 rounded-md bg-zinc-100 p-1;
 	}

package/dist/style.css

@@ -9,7 +9,6 @@
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
-    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-900: oklch(21% 0.034 264.665);
@@ -20,6 +19,7 @@
     --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
     --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
     --color-black: #000;
     --color-white: #fff;
@@ -200,6 +200,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -224,6 +227,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[9999\] {
+    z-index: 9999;
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -245,6 +251,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .inline-grid {
+    display: inline-grid;
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -275,6 +284,9 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
   .w-60 {
     width: calc(var(--spacing) * 60);
   }
@@ -290,6 +302,9 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .-translate-x-px {
     --tw-translate-x: -1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -313,6 +328,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .items-center {
     align-items: center;
   }
@@ -399,9 +417,6 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -415,6 +430,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -437,9 +456,6 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-red-700 {
-    color: var(--color-red-700);
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -449,6 +465,9 @@
   .text-zinc-700 {
     color: var(--color-zinc-700);
   }
+  .text-zinc-800 {
+    color: var(--color-zinc-800);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -538,11 +557,6 @@
       color: var(--color-zinc-500);
     }
   }
-  .disabled\:opacity-40 {
-    &:disabled {
-      opacity: 40%;
-    }
-  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -582,10 +596,12 @@
   .vstack {
     display: flex;
     min-height: calc(var(--spacing) * 0);
+    min-width: calc(var(--spacing) * 0);
     flex-direction: column;
   }
   .hstack {
     display: flex;
+    min-height: calc(var(--spacing) * 0);
     min-width: calc(var(--spacing) * 0);
     flex-direction: row;
   }
@@ -766,13 +782,6 @@
     box-shadow: var(--shadow-md);
   }
   .tooltip {
-    pointer-events: none;
-    position: absolute;
-    bottom: calc(100% + 6px);
-    left: calc(1/2 * 100%);
-    z-index: 10;
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
     border-radius: var(--radius-sm);
     background-color: var(--color-black);
     padding-inline: calc(var(--spacing) * 2);
@@ -781,24 +790,36 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
     white-space: nowrap;
     color: var(--color-white);
-    opacity: 0%;
-  }
-  .tooltip-trigger:hover .tooltip,	.tooltip-trigger:focus-within .tooltip {
-    opacity: 100%;
   }
   .tooltip::before {
     content: '';
     position: absolute;
-    top: calc(100% - 5px);
-    left: 50%;
-    width: 10px;
-    height: 10px;
-    transform: translateX(-50%) rotate(45deg);
+    width: 8px;
+    height: 8px;
     background: #000;
-    border-radius: 0;
-    border-bottom-right-radius: 0.125rem;
+    transform: rotate(45deg);
     z-index: -1;
   }
+  .tooltip[data-anchor='top']::before {
+    bottom: -4px;
+    left: 50%;
+    margin-left: -4px;
+  }
+  .tooltip[data-anchor='bottom']::before {
+    top: -4px;
+    left: 50%;
+    margin-left: -4px;
+  }
+  .tooltip[data-anchor='leading']::before {
+    right: -4px;
+    top: 50%;
+    margin-top: -4px;
+  }
+  .tooltip[data-anchor='trailing']::before {
+    left: -4px;
+    top: 50%;
+    margin-top: -4px;
+  }
   .segmented-picker {
     gap: calc(var(--spacing) * 1);
     border-radius: var(--radius-md);

package/dist/utils/positioning.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared positioning engine for floating UI elements (popovers, tooltips, dropdowns, etc.).
+ * Handles anchor/align placement with automatic viewport-overflow flipping.
+ */
+export type Anchor = 'top' | 'bottom' | 'leading' | 'trailing';
+export type Align = 'left' | 'center' | 'right';
+export type Transform = 'none' | 'translateX(-50%)' | 'translateX(-100%)' | 'translateY(-100%)' | 'translate(-50%, -100%)' | 'translate(-100%, -100%)';
+export interface Placement {
+    top: number;
+    left: number;
+    transform: Transform;
+}
+export interface PositionResult extends Placement {
+    anchor: Anchor;
+    align: Align;
+}
+export declare function oppositeAnchor(value: Anchor): Anchor;
+export declare function flippedAlign(value: Align): Align;
+export declare function getPlacement(rect: DOMRect, nextAnchor: Anchor, nextAlign: Align): Placement;
+export declare function getViewportRect(placement: Placement, width: number, height: number): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export declare function overflowScore(rect: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}, margin?: number): number;
+/**
+ * Compute the best placement for a floating element anchored to a trigger.
+ * Tries the preferred anchor/align first, then flips to avoid viewport overflow.
+ */
+export declare function computePosition(triggerRect: DOMRect, floatingWidth: number, floatingHeight: number, preferredAnchor: Anchor, preferredAlign: Align): PositionResult;

package/dist/utils/positioning.js

@@ -0,0 +1,112 @@
+/**
+ * Shared positioning engine for floating UI elements (popovers, tooltips, dropdowns, etc.).
+ * Handles anchor/align placement with automatic viewport-overflow flipping.
+ */
+export function oppositeAnchor(value) {
+    if (value === 'top')
+        return 'bottom';
+    if (value === 'bottom')
+        return 'top';
+    if (value === 'leading')
+        return 'trailing';
+    return 'leading';
+}
+export function flippedAlign(value) {
+    if (value === 'center')
+        return 'center';
+    return value === 'left' ? 'right' : 'left';
+}
+export function getPlacement(rect, nextAnchor, nextAlign) {
+    if (nextAnchor === 'top' || nextAnchor === 'bottom') {
+        const left = nextAlign === 'left'
+            ? rect.left + window.scrollX
+            : nextAlign === 'right'
+                ? rect.right + window.scrollX
+                : rect.left + rect.width / 2 + window.scrollX;
+        const top = nextAnchor === 'bottom' ? rect.bottom + window.scrollY : rect.top + window.scrollY;
+        if (nextAnchor === 'top' && nextAlign === 'center') {
+            return { top, left, transform: 'translate(-50%, -100%)' };
+        }
+        if (nextAnchor === 'top' && nextAlign === 'right') {
+            return { top, left, transform: 'translate(-100%, -100%)' };
+        }
+        if (nextAlign === 'center') {
+            return { top, left, transform: 'translateX(-50%)' };
+        }
+        if (nextAnchor === 'top') {
+            return { top, left, transform: 'translateY(-100%)' };
+        }
+        if (nextAlign === 'right') {
+            return { top, left, transform: 'translateX(-100%)' };
+        }
+        return { top, left, transform: 'none' };
+    }
+    if (nextAnchor === 'leading') {
+        return {
+            top: rect.top + window.scrollY,
+            left: rect.left + window.scrollX,
+            transform: 'translateX(-100%)'
+        };
+    }
+    return {
+        top: rect.top + window.scrollY,
+        left: rect.right + window.scrollX,
+        transform: 'none'
+    };
+}
+export function getViewportRect(placement, width, height) {
+    let left = placement.left - window.scrollX;
+    let top = placement.top - window.scrollY;
+    if (placement.transform === 'translateX(-100%)')
+        left -= width;
+    else if (placement.transform === 'translateX(-50%)')
+        left -= width / 2;
+    else if (placement.transform === 'translateY(-100%)')
+        top -= height;
+    else if (placement.transform === 'translate(-50%, -100%)') {
+        left -= width / 2;
+        top -= height;
+    }
+    else if (placement.transform === 'translate(-100%, -100%)') {
+        left -= width;
+        top -= height;
+    }
+    return { left, top, right: left + width, bottom: top + height };
+}
+export function overflowScore(rect, margin = 8) {
+    const leftOverflow = Math.max(0, margin - rect.left);
+    const rightOverflow = Math.max(0, rect.right - (window.innerWidth - margin));
+    const topOverflow = Math.max(0, margin - rect.top);
+    const bottomOverflow = Math.max(0, rect.bottom - (window.innerHeight - margin));
+    return leftOverflow + rightOverflow + topOverflow + bottomOverflow;
+}
+/**
+ * Compute the best placement for a floating element anchored to a trigger.
+ * Tries the preferred anchor/align first, then flips to avoid viewport overflow.
+ */
+export function computePosition(triggerRect, floatingWidth, floatingHeight, preferredAnchor, preferredAlign) {
+    const candidates = [
+        { anchor: preferredAnchor, align: preferredAlign },
+        { anchor: preferredAnchor, align: flippedAlign(preferredAlign) },
+        { anchor: oppositeAnchor(preferredAnchor), align: preferredAlign },
+        { anchor: oppositeAnchor(preferredAnchor), align: flippedAlign(preferredAlign) }
+    ];
+    const seen = new Set();
+    let best = null;
+    let bestScore = Number.POSITIVE_INFINITY;
+    for (const candidate of candidates) {
+        const key = `${candidate.anchor}:${candidate.align}`;
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        const placement = getPlacement(triggerRect, candidate.anchor, candidate.align);
+        const rect = getViewportRect(placement, floatingWidth, floatingHeight);
+        const score = overflowScore(rect);
+        if (score < bestScore) {
+            bestScore = score;
+            best = { ...placement, anchor: candidate.anchor, align: candidate.align };
+        }
+    }
+    // Fallback (should never happen — at least one candidate always exists)
+    return best ?? { top: 0, left: 0, transform: 'none', anchor: preferredAnchor, align: preferredAlign };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.49",
+	"version": "0.0.52",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",