@popover-kit/svelte 0.1.0 → 0.1.1

package/README.md

@@ -22,8 +22,9 @@ and **native RTL** support via Tailwind CSS v4 + daisyUI v5, and optional
 pnpm add @popover-kit/svelte
 ```
 
-Peer dependency: `svelte@^5`. Ships with `lucide-svelte` as a regular
-dependency (used for the built-in close icon).
+Peer dependency: `svelte@^5`. No icon library dependency — the built-in
+close button renders a plain "✕" character. Pass your own `iconSnippet`
+prop to `<PopoverContent>` (e.g. a `lucide-svelte` icon) to override it.
 
 ## Quick start
 
@@ -46,6 +47,13 @@ dependency (used for the built-in close icon).
 </Popover>
 ```
 
+See `demos/PageDemo.svelte` for 12 runnable scenarios (placements,
+alignments, `autoVertical`, hover/focus triggers, controlled mode, a
+shared/injected controller, a fully headless example, and three
+booking/e-commerce-flavored patterns: a Kayak-style search bar, a checkout
+confirmation, and a product-discovery tooltip). Run it in a browser via
+`examples/svelte` (see its README).
+
 ## Dark theme & RTL
 
 - **Dark theme**: the panel uses daisyUI's `card bg-base-100` tokens, so it
@@ -70,6 +78,13 @@ ctrl.open();
 `PopoverController` is pure TypeScript (a `.svelte.ts` module using runes
 for its reactive state) — no component required.
 
+## Scripts
+
+```bash
+pnpm build          # bundles src/ -> dist/index.js + dist/index.d.ts
+pnpm test           # vitest (position engine, a11y utils, controller)
+pnpm typecheck      # svelte-check
+```
 
 ## License
 

package/dist/components/Popover.svelte

@@ -18,15 +18,15 @@
 	 *   {#snippet content(ctx: ContentSnippetCtx)}  — render the panel body
 	 *   {#snippet children(ctrl: IPopoverController)} — shorthand: default <button>
 	 */
-	import { onDestroy, type Snippet } from 'svelte';
+	import { onDestroy, untrack, type Snippet } from 'svelte';
 	import type {
 		PopoverProps,
 		IPopoverController,
 		TriggerSnippetCtx,
 		ContentSnippetCtx
-	} from '../types/types.js';
+	} from '../types.js';
 
-	import { PopoverController } from '../controller.svelte';
+	import { PopoverController } from '../controller.svelte.js';
 	import PopoverPanel from '../elements/PopoverPanel.svelte';
 	import {
 		DEFAULT_OPTIONS,
@@ -35,7 +35,7 @@
 		DEFAULT_OPEN_DELAY,
 		DEFAULT_CLOSE_DELAY,
 		DEFAULT_SHOW_ARROW
-	} from '../constants/config.js';
+	} from '../constants.js';
 
 	// ── Props ────────────────────────────────────────────────────────────────────
 
@@ -72,15 +72,20 @@
 	// ── Controller ────────────────────────────────────────────────────────────────
 	// owned = we created it → destroy on unmount.
 	// injected = caller's lifecycle → only wire refs, never destroy.
+	//
+	// Deliberately constructed ONCE from the props' initial values — `id`,
+	// `placement`, etc. configure the controller at creation time only; later
+	// prop changes are intentionally not reactive here; `open` is the one
+	// exception, handled by its own $effect below. `untrack` tells the
+	// compiler this one-time read is intentional (not a missed dependency).
 
 	let owned = false;
-	let ctrl: PopoverController;
-
-	if (injectedCtrl instanceof PopoverController) {
-		ctrl = injectedCtrl;
-	} else {
+	const ctrl: PopoverController = untrack(() => {
+		if (injectedCtrl instanceof PopoverController) {
+			return injectedCtrl;
+		}
 		owned = true;
-		ctrl = new PopoverController({
+		return new PopoverController({
 			id,
 			placement,
 			offset,
@@ -91,7 +96,7 @@
 			onClose,
 			onStateChange
 		});
-	}
+	});
 
 	// ── DOM refs ─────────────────────────────────────────────────────────────────
 	//

package/dist/components/PopoverContent.svelte

@@ -18,8 +18,7 @@
 	 * {/snippet}
 	 */
 	import type { Snippet } from 'svelte';
-	import { X } from 'lucide-svelte';
-	import type { ContentSnippetCtx } from '../types/types.js';
+	import type { ContentSnippetCtx } from '../types.js';
 
 	interface Props {
 		ctx: ContentSnippetCtx;
@@ -31,6 +30,14 @@
 		body?: Snippet<[ContentSnippetCtx]>;
 		/** Fallback when no body snippet is provided. */
 		children?: Snippet<[ContentSnippetCtx]>;
+		/**
+		 * Overrides the default close-button glyph (a plain "X" character —
+		 * no icon library dependency shipped by this package). Pass e.g. a
+		 * `lucide-svelte` icon snippet from your own app to swap it in:
+		 *
+		 * {#snippet iconSnippet()}<X class="h-3 w-3" />{/snippet}
+		 */
+		iconSnippet?: Snippet;
 	}
 
 	const {
@@ -40,7 +47,8 @@
 		showClose = false,
 		class: cls = '',
 		body,
-		children
+		children,
+		iconSnippet
 	}: Props = $props();
 </script>
 
@@ -57,7 +65,11 @@
 					aria-label="Close"
 					onclick={() => ctx.ctrl.close()}
 				>
-					<X class="h-3 w-3" aria-hidden="true" />
+					{#if iconSnippet}
+						{@render iconSnippet()}
+					{:else}
+						<span class="text-xs leading-none" aria-hidden="true">✕</span>
+					{/if}
 				</button>
 			{/if}
 		</div>

package/dist/components/PopoverTrigger.svelte

@@ -12,7 +12,7 @@
 	 * {/snippet}
 	 */
 	import type { Snippet } from 'svelte';
-	import type { TriggerSnippetCtx } from '../types/types.js';
+	import type { TriggerSnippetCtx } from '../types.js';
 
 	interface Props {
 		ctx: TriggerSnippetCtx;

package/dist/controller.svelte.js

@@ -5,22 +5,35 @@
 //
 // Open sequence (critical — previous versions got this wrong):
 //
-//   1. open() sets state → 'opening' (isVisible = true) and returns.
-//   2. Svelte sees isVisible changed, mounts the panel element in the DOM.
-//   3. Svelte runs $effects. The $effect in Popover.svelte sees panelEl is
-//      now set and calls ctrl.attachPanel(el).
-//   4. attachPanel() detects state === 'opening' → calls #finishOpen().
-//   5. #finishOpen() reads panel dimensions (element is in DOM), computes
-//      position, sets up listeners, sets state → 'open'.
+// Two DOM-mounting strategies are supported, both converging on the same
+// #finishOpen():
+//
+//   A) Conditionally-mounted panel (Popover.svelte's default):
+//     1. open() sets state → 'opening' (isVisible = true) and returns —
+//        #panelEl isn't set yet, so it can't finish synchronously.
+//     2. Svelte sees isVisible changed, mounts the panel element in the DOM.
+//     3. Svelte runs $effects. The $effect in Popover.svelte sees panelEl is
+//        now set and calls ctrl.attachPanel(el).
+//     4. attachPanel() detects state === 'opening' → calls #finishOpen().
+//
+//   B) Headless / always-mounted panel (attachTrigger + attachPanel called
+//      once up front, before open() is ever called):
+//     1. open() sets state → 'opening', then immediately sees #panelEl is
+//        already set and calls #finishOpen() itself — there's no later
+//        attachPanel() call coming to do it.
+//
+//   #finishOpen() reads panel dimensions (element is in DOM), computes
+//   position, sets up listeners, sets state → 'open'.
 //
 // This ordering guarantees:
 //   • #panelEl is always non-null when #setupListeners() runs.
 //   • Click-outside uses the real panel element (not null).
 //   • No rAF/setTimeout hacks needed.
+//   • open() completes synchronously regardless of mounting strategy.
 // =============================================================================
 import { computePosition } from "./utils/position.js";
 import { createFocusTrap, onClickOutside, announce } from "./utils/a11y.js";
-import { uid, DEFAULT_OPTIONS, ANIMATION_DURATION_MS } from "./constants/config.js";
+import { uid, DEFAULT_OPTIONS, ANIMATION_DURATION_MS } from "./constants.js";
 export class PopoverController {
     // ─── Stable IDs ───────────────────────────────────────────────────────────────
     triggerId;
@@ -122,7 +135,7 @@ export class PopoverController {
         if (this.#state === "opening") {
             this.#finishOpen();
         }
-        else if (this.isVisible) {
+        else if (this.#state === "open") {
             this.#compute();
         }
     }
@@ -138,8 +151,15 @@ export class PopoverController {
             return;
         this.#cancelClose();
         // Set 'opening' FIRST → isVisible becomes true → Svelte mounts the panel
-        // → $effect fires → attachPanel() → #finishOpen(). Nothing else happens here.
+        // → $effect fires → attachPanel() → #finishOpen().
         this.#setState(false, "opening");
+        // Headless usage (or any consumer that keeps the panel element in the
+        // DOM at all times instead of conditionally mounting it) already has
+        // #panelEl set at this point — no attachPanel() call is coming to
+        // finish the sequence, so finish it here instead. This makes open()
+        // correct regardless of DOM-mounting strategy.
+        if (this.#panelEl)
+            this.#finishOpen();
     }
     close() {
         if (!this.#isOpen || this.#state === "closing")
@@ -161,7 +181,7 @@ export class PopoverController {
     }
     setPlacement(p) {
         this.#placement = p;
-        if (this.isVisible)
+        if (this.#state === "open")
             this.#compute();
     }
     // ─── Destroy ──────────────────────────────────────────────────────────────────
@@ -190,7 +210,10 @@ export class PopoverController {
     #compute() {
         if (!this.#triggerEl || !this.#panelEl)
             return;
-        const result = computePosition(this.#triggerEl, this.#panelEl, this.#placement, this.#offset);
+        // Pass the previous resolved placement for flip hysteresis — keeps the
+        // panel on whichever side it's already showing on when that side still
+        // fits, instead of flip-flopping right at the viewport boundary.
+        const result = computePosition(this.#triggerEl, this.#panelEl, this.#placement, this.#offset, this.#resolvedPlacement);
         this.#pos = result;
         this.#resolvedPlacement = result.placement;
     }
@@ -199,7 +222,14 @@ export class PopoverController {
             return;
         this.#rafId = requestAnimationFrame(() => {
             this.#rafId = null;
-            if (this.isVisible)
+            // Guaranteed 'open' in practice — the scroll/resize/ResizeObserver
+            // listeners that call this are only ever wired up in
+            // #setupListeners() (called from #finishOpen()) and torn down
+            // synchronously the moment close() runs, so no stale rAF can land
+            // here mid-'closing'. Checked anyway as defense-in-depth against
+            // exactly the class of "recomputed mid-exit-animation" bug that
+            // causes a panel to visibly jump/flip while fading out.
+            if (this.#state === "open")
                 this.#compute();
         });
     }

package/dist/elements/PopoverArrow.svelte

@@ -18,7 +18,7 @@
 	 * A border on two sides of the square, combined with the clip, produces a
 	 * bordered triangle that matches the card's border colour.
 	 */
-	import type { Placement } from '../types/types.js';
+	import type { Placement } from '../types.js';
 
 	interface Props {
 		placement: Placement;

package/dist/elements/PopoverPanel.svelte

@@ -16,7 +16,7 @@
 	 * Pure CSS handles animations — no Svelte transitions needed.
 	 */
 	import type { Snippet } from 'svelte';
-	import type { Placement, ResolvedPosition, PopoverAnimation } from '../types/types.js';
+	import type { Placement, ResolvedPosition, PopoverAnimation } from '../types.js';
 	import PopoverArrow from './PopoverArrow.svelte';
 
 	interface Props {

package/dist/index.d.ts

@@ -1,9 +1,5 @@
 import { Snippet } from 'svelte';
 
-// =============================================================================
-// Popover Micro-Plugin — Type Definitions (single source of truth)
-// =============================================================================
-// ─── Placement ────────────────────────────────────────────────────────────────
 /**
  * Where the panel appears relative to the trigger.
  *
@@ -14,7 +10,6 @@ import { Snippet } from 'svelte';
 export type Side = "top" | "bottom" | "left" | "right";
 export type Alignment = "start" | "end";
 export type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "autoVertical";
-// ─── Computed position ────────────────────────────────────────────────────────
 /**
  * Output of the positioning engine.
  * x / y are viewport-relative px values suitable for `position: fixed`.
@@ -22,18 +17,15 @@ export type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-sta
 export interface ResolvedPosition {
 	x: number;
 	y: number;
-	placement: Placement; // actual placement used (may differ from requested after flip)
+	placement: Placement;
 }
-// ─── State ────────────────────────────────────────────────────────────────────
 /** Fine-grained lifecycle state — drives CSS enter/exit transitions. */
 export type PopoverState = "closed" | "opening" | "open" | "closing";
-// ─── Controller interface ─────────────────────────────────────────────────────
 /**
  * Public surface of PopoverController.
  * All readonly getters are $state runes — Svelte templates track them.
  */
 export interface IPopoverController {
-	// Reactive getters
 	readonly isOpen: boolean;
 	readonly state: PopoverState;
 	readonly resolvedPlacement: Placement;
@@ -42,12 +34,10 @@ export interface IPopoverController {
 	readonly isVisible: boolean;
 	readonly triggerId: string;
 	readonly contentId: string;
-	// Core actions
 	open(): void;
 	close(): void;
 	toggle(): void;
 	setPlacement(p: Placement): void;
-	// Element wiring (called by Popover.svelte $effects and headless consumers)
 	attachTrigger(el: HTMLElement): void;
 	attachPanel(el: HTMLElement): void;
 	detachTrigger(): void;
@@ -65,7 +55,6 @@ export interface PopoverSnapshot {
 }
 export type SubscriberFn = (snap: PopoverSnapshot) => void;
 export type UnsubscribeFn = () => void;
-// ─── Controller options ───────────────────────────────────────────────────────
 export interface ControllerOptions {
 	/** ID prefix for generated ARIA ids. Auto-generated if omitted. */
 	id?: string;
@@ -80,7 +69,6 @@ export interface ControllerOptions {
 	onClose?: () => void;
 	onStateChange?: (state: PopoverState) => void;
 }
-// ─── Component props ──────────────────────────────────────────────────────────
 export type PopoverAnimation = "scale" | "slide" | "fade" | "none";
 export type TriggerInteraction = "click" | "hover" | "focus" | "manual";
 export interface PopoverProps extends ControllerOptions {
@@ -98,7 +86,6 @@ export interface PopoverProps extends ControllerOptions {
 	/** Inject an existing controller; this component will not destroy it. */
 	controller?: IPopoverController;
 }
-// ─── Snippet contexts (Bits UI style — fully typed parameters) ────────────────
 /** Passed into `{#snippet trigger(ctx)}`. Spread these onto your trigger element. */
 export interface TriggerSnippetCtx {
 	id: string;
@@ -118,13 +105,11 @@ export interface ContentSnippetCtx {
 	resolvedPlacement: Placement;
 	state: PopoverState;
 }
-// ─── Accessibility handles ────────────────────────────────────────────────────
 export interface FocusTrapHandle {
 	activate(): void;
 	deactivate(): void;
 	destroy(): void;
 }
-// ─── Plugin factory ───────────────────────────────────────────────────────────
 export interface ThemeTokens {
 	borderRadius: string;
 	backdropBlur: string;
@@ -204,6 +189,14 @@ interface Props$2 {
 	children?: Snippet<[
 		ContentSnippetCtx
 	]>;
+	/**
+	 * Overrides the default close-button glyph (a plain "X" character —
+	 * no icon library dependency shipped by this package). Pass e.g. a
+	 * `lucide-svelte` icon snippet from your own app to swap it in:
+	 *
+	 * {#snippet iconSnippet()}<X class="h-3 w-3" />{/snippet}
+	 */
+	iconSnippet?: Snippet;
 }
 export declare const PopoverContent: import("svelte").Component<Props$2, {}, "">;
 export type PopoverContent = ReturnType<typeof PopoverContent>;
@@ -241,15 +234,18 @@ export declare function getDirection(el: HTMLElement): "ltr" | "rtl";
  * Compute the `position:fixed` coordinates for the popover panel.
  *
  * The panel element MUST already be in the DOM (even if visibility:hidden)
- * so its dimensions can be read via getBoundingClientRect().
+ * so its dimensions can be read.
  *
  * @param triggerEl - The trigger / reference element.
  * @param panelEl   - The panel element to position.
  * @param placement - Requested placement (may be overridden by auto-flip).
  * @param offset    - Gap between trigger edge and panel in px.
+ * @param previousPlacement - The last resolved placement, if any. Used for
+ *   flip hysteresis (see `resolveAutoSide`) — pass the previous call's
+ *   `result.placement` on recomputes; omit on the first compute.
  * @returns { x, y, placement } — coordinates and the actual placement used.
  */
-export declare function computePosition(triggerEl: HTMLElement, panelEl: HTMLElement, placement: Placement, offset: number): ResolvedPosition;
+export declare function computePosition(triggerEl: HTMLElement, panelEl: HTMLElement, placement: Placement, offset: number, previousPlacement?: Placement | null): ResolvedPosition;
 /**
  * Keeps keyboard focus inside `container` while active.
  * Activation is deferred so it can be timed to the enter animation.
@@ -273,12 +269,19 @@ export declare const DEFAULT_OPTIONS: {
 	readonly closeOnOutsideClick: true;
 	readonly closeOnEsc: true;
 };
+export declare const DEFAULT_ANIMATION: "scale";
+export declare const DEFAULT_TRIGGER: "click";
+export declare const DEFAULT_OPEN_DELAY: number;
+export declare const DEFAULT_CLOSE_DELAY: number;
+export declare const DEFAULT_SHOW_ARROW: boolean;
 /**
  * Must match the longest `transition-duration` in PopoverPanel's CSS.
  * The controller waits this long after close() before setting state → 'closed'
  * so the exit animation completes before the panel is unmounted.
  */
 export declare const ANIMATION_DURATION_MS = 200;
+export declare const FOCUSABLE_SELECTOR: string;
+export declare const LIVE_REGION_ID = "pop-live-region";
 export declare const DEFAULT_THEME_TOKENS: ThemeTokens;
 /**
  * Generates a stable, unique DOM id.

package/dist/index.js

@@ -1 +1 @@
-import{default as q}from"./components/Popover.svelte";import{default as V}from"./components/PopoverTrigger.svelte";import{default as W}from"./components/PopoverContent.svelte";import{default as j}from"./elements/PopoverPanel.svelte";import{default as z}from"./elements/PopoverArrow.svelte";import{PopoverController as Q}from"./controller.svelte";function x(t){if(t==="autoVertical")return{side:"bottom",alignment:null};let[o,e=null]=t.split("-");return{side:o,alignment:e}}function w(t,o,e,n,i,s){let a,c;switch(e){case"bottom":c=t.bottom+i;break;case"top":c=t.top-o.height-i;break;case"left":a=t.left-o.width-i;break;case"right":a=t.right+i;break}if(e==="top"||e==="bottom"){let r=s?t.right-o.width:t.left,d=s?t.left:t.right-o.width;n==="start"?a=r:n==="end"?a=d:a=t.left+(t.width-o.width)/2}else n==="start"?c=t.top:n==="end"?c=t.bottom-o.height:c=t.top+(t.height-o.height)/2;return{x:a,y:c}}function T(t){return getComputedStyle(t).direction==="rtl"?"rtl":"ltr"}function v(t,o,e,n=6){return Math.max(n,Math.min(e-o-n,t))}function O(t,o,e,n,i){let s=window.innerWidth,a=window.innerHeight;switch(t){case"bottom":return o.bottom+i+e<=a?"bottom":"top";case"top":return o.top-i-e>=0?"top":"bottom";case"right":return o.right+i+n<=s?"right":"left";case"left":return o.left-i-n>=0?"left":"right"}}function _(t,o,e,n){let i=t.getBoundingClientRect(),s=o.getBoundingClientRect(),a=window.innerWidth,c=window.innerHeight,r=T(t)==="rtl",{side:d,alignment:p}=x(e),u=O(d,i,s.height,s.width,n),f=e==="autoVertical"?u==="top"?"top":"bottom":u===d?e:p?`${u}-${p}`:u,{x:m,y:h}=w(i,s,u,p,n,r);return u==="top"||u==="bottom"?m=v(m,s.width,a):h=v(h,s.height,c),{x:m,y:h,placement:f}}var L={placement:"bottom",offset:8,trapFocus:!0,closeOnOutsideClick:!0,closeOnEsc:!0};var k=200,A=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]',"details > summary"].join(", "),E="pop-live-region",b={borderRadius:"0.75rem",backdropBlur:"12px",shadowColor:"rgba(0,0,0,0.15)",lightBg:"oklch(var(--color-base-100))",darkBg:"oklch(var(--color-base-200))",lightBorder:"oklch(var(--color-base-300))",darkBorder:"oklch(var(--color-base-300))",lightText:"oklch(var(--color-base-content))",darkText:"oklch(var(--color-base-content))",accentColor:"oklch(var(--color-primary))"},D=0;function S(t="pop"){return`${t}-${++D}`}function I(t,o){let e=!1,n=document.activeElement;function i(){return Array.from(t.querySelectorAll(A)).filter(r=>!r.hasAttribute("disabled")&&r.offsetParent!==null)}function s(r){if(!e||r.key!=="Tab")return;let d=i();if(!d.length){r.preventDefault();return}let p=d[0],u=d[d.length-1],f=document.activeElement;r.shiftKey?(f===p||!t.contains(f))&&(r.preventDefault(),u.focus()):(f===u||!t.contains(f))&&(r.preventDefault(),p.focus())}function a(){if(e)return;e=!0,n=document.activeElement,document.addEventListener("keydown",s,!0);let r=i()[0]??t;requestAnimationFrame(()=>r.focus())}function c(){if(!e)return;e=!1,document.removeEventListener("keydown",s,!0);let r=o??n;r&&typeof r.focus=="function"&&requestAnimationFrame(()=>r.focus())}return{activate:a,deactivate:c,destroy:c}}var l=null;function P(){return l||(l=document.getElementById(E),l||(l=document.createElement("div"),l.id=E,l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),Object.assign(l.style,{position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap",border:"0",padding:"0",margin:"-1px"}),document.body.appendChild(l)),l)}function F(t,o=80){let e=P();e.textContent="",setTimeout(()=>{e.textContent=t},o)}function y(t,o){function e(n){let i=n.target;t.some(s=>s.contains(i))||o(n)}return document.addEventListener("pointerdown",e,!0),()=>document.removeEventListener("pointerdown",e,!0)}function M(t={}){return{defaults:t.defaults??{},tokens:{...b,...t.theme}}}export{k as ANIMATION_DURATION_MS,L as DEFAULT_OPTIONS,b as DEFAULT_THEME_TOKENS,q as Popover,z as PopoverArrow,W as PopoverContent,Q as PopoverController,j as PopoverPanel,V as PopoverTrigger,F as announce,_ as computePosition,I as createFocusTrap,M as createPopoverPlugin,T as getDirection,y as onClickOutside,x as parsePlacement,S as uid};
+import{default as Q}from"./components/Popover.svelte";import{default as tt}from"./components/PopoverTrigger.svelte";import{default as ot}from"./components/PopoverContent.svelte";import{default as rt}from"./elements/PopoverPanel.svelte";import{default as st}from"./elements/PopoverArrow.svelte";import{PopoverController as ut}from"./controller.svelte.js";function b(t){if(t==="autoVertical")return{side:"bottom",alignment:null};let[n,o=null]=t.split("-");return{side:n,alignment:o}}function D(t,n,o,i,s,c,a){let r,e;switch(i){case"bottom":e=t.bottom+c;break;case"top":e=t.top-o-c;break;case"left":r=t.left-n-c;break;case"right":r=t.right+c;break}if(i==="top"||i==="bottom"){let u=a?t.right-n:t.left,d=a?t.left:t.right-n;s==="start"?r=u:s==="end"?r=d:r=t.left+(t.width-n)/2}else s==="start"?e=t.top:s==="end"?e=t.bottom-o:e=t.top+(t.height-o)/2;return{x:r,y:e}}function v(t){return getComputedStyle(t).direction==="rtl"?"rtl":"ltr"}function T(t,n,o,i=6){return Math.max(i,Math.min(o-n-i,t))}var I={top:"bottom",bottom:"top",left:"right",right:"left"};function F(t,n,o,i,s,c,a,r=0){switch(t){case"bottom":return n.bottom+s+o+r<=a;case"top":return n.top-s-o-r>=0;case"right":return n.right+s+i+r<=c;case"left":return n.left-s-i-r>=0}}var S=24;function k(t,n,o,i,s,c,a,r){let e=I[t],u=(d,p=0)=>F(d,n,o,i,s,c,a,p);return r===e?u(t,S)?t:u(e)?e:t:u(t)?t:u(e)?e:r??t}function C(t,n,o,i,s){let c=t.getBoundingClientRect(),a=n.offsetWidth,r=n.offsetHeight,e=window.innerWidth,u=window.innerHeight,d=v(t)==="rtl",{side:p,alignment:f}=b(o),L=s?b(s).side:null,m=k(p,c,r,a,i,e,u,L),O=o==="autoVertical"?m==="top"?"top":"bottom":m===p?o:f?`${m}-${f}`:m,{x:A,y:h}=D(c,a,r,m,f,i,d);return m==="top"||m==="bottom"?A=T(A,a,e):h=T(h,r,u),{x:A,y:h,placement:O}}var N={placement:"bottom",offset:8,trapFocus:!0,closeOnOutsideClick:!0,closeOnEsc:!0},P="scale",U="click",w=0,y=100,M=!1,B=200,x=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]',"details > summary"].join(", "),E="pop-live-region",_={borderRadius:"0.75rem",backdropBlur:"12px",shadowColor:"rgba(0,0,0,0.15)",lightBg:"oklch(var(--color-base-100))",darkBg:"oklch(var(--color-base-200))",lightBorder:"oklch(var(--color-base-300))",darkBorder:"oklch(var(--color-base-300))",lightText:"oklch(var(--color-base-content))",darkText:"oklch(var(--color-base-content))",accentColor:"oklch(var(--color-primary))"},G=0;function R(t="pop"){return`${t}-${++G}`}function K(t,n){let o=!1,i=document.activeElement;function s(){return Array.from(t.querySelectorAll(x)).filter(e=>!e.hasAttribute("disabled")&&e.offsetParent!==null)}function c(e){if(!o||e.key!=="Tab")return;let u=s();if(!u.length){e.preventDefault();return}let d=u[0],p=u[u.length-1],f=document.activeElement;e.shiftKey?(f===d||!t.contains(f))&&(e.preventDefault(),p.focus()):(f===p||!t.contains(f))&&(e.preventDefault(),d.focus())}function a(){if(o)return;o=!0,i=document.activeElement,document.addEventListener("keydown",c,!0);let e=s()[0]??t;requestAnimationFrame(()=>e.focus())}function r(){if(!o)return;o=!1,document.removeEventListener("keydown",c,!0);let e=n??i;e&&typeof e.focus=="function"&&requestAnimationFrame(()=>e.focus())}return{activate:a,deactivate:r,destroy:r}}var l=null;function g(){return l||(l=document.getElementById(E),l||(l=document.createElement("div"),l.id=E,l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),Object.assign(l.style,{position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap",border:"0",padding:"0",margin:"-1px"}),document.body.appendChild(l)),l)}function H(t,n=80){let o=g();o.textContent="",setTimeout(()=>{o.textContent=t},n)}function V(t,n){function o(i){let s=i.target;t.some(c=>c.contains(s))||n(i)}return document.addEventListener("pointerdown",o,!0),()=>document.removeEventListener("pointerdown",o,!0)}function X(t={}){return{defaults:t.defaults??{},tokens:{..._,...t.theme}}}export{B as ANIMATION_DURATION_MS,P as DEFAULT_ANIMATION,y as DEFAULT_CLOSE_DELAY,w as DEFAULT_OPEN_DELAY,N as DEFAULT_OPTIONS,M as DEFAULT_SHOW_ARROW,_ as DEFAULT_THEME_TOKENS,U as DEFAULT_TRIGGER,x as FOCUSABLE_SELECTOR,E as LIVE_REGION_ID,Q as Popover,st as PopoverArrow,ot as PopoverContent,ut as PopoverController,rt as PopoverPanel,tt as PopoverTrigger,H as announce,C as computePosition,K as createFocusTrap,X as createPopoverPlugin,v as getDirection,V as onClickOutside,b as parsePlacement,R as uid};

package/dist/utils/a11y.js

@@ -1 +1 @@
-import{FOCUSABLE_SELECTOR as v,LIVE_REGION_ID as m}from"../constants/config.js";function y(o,r){let t=!1,i=document.activeElement;function u(){return Array.from(o.querySelectorAll(v)).filter(e=>!e.hasAttribute("disabled")&&e.offsetParent!==null)}function c(e){if(!t||e.key!=="Tab")return;const s=u();if(!s.length){e.preventDefault();return}const d=s[0],l=s[s.length-1],a=document.activeElement;e.shiftKey?(a===d||!o.contains(a))&&(e.preventDefault(),l.focus()):(a===l||!o.contains(a))&&(e.preventDefault(),d.focus())}function p(){if(t)return;t=!0,i=document.activeElement,document.addEventListener("keydown",c,!0);const e=u()[0]??o;requestAnimationFrame(()=>e.focus())}function f(){if(!t)return;t=!1,document.removeEventListener("keydown",c,!0);const e=r??i;e&&typeof e.focus=="function"&&requestAnimationFrame(()=>e.focus())}return{activate:p,deactivate:f,destroy:f}}let n=null;function g(){return n||(n=document.getElementById(m),n||(n=document.createElement("div"),n.id=m,n.setAttribute("aria-live","polite"),n.setAttribute("aria-atomic","true"),Object.assign(n.style,{position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap",border:"0",padding:"0",margin:"-1px"}),document.body.appendChild(n)),n)}function h(o,r=80){const t=g();t.textContent="",setTimeout(()=>{t.textContent=o},r)}function b(o,r){function t(i){const u=i.target;o.some(c=>c.contains(u))||r(i)}return document.addEventListener("pointerdown",t,!0),()=>document.removeEventListener("pointerdown",t,!0)}export{h as announce,y as createFocusTrap,b as onClickOutside};
+import{FOCUSABLE_SELECTOR as v,LIVE_REGION_ID as m}from"../constants.js";function y(o,r){let t=!1,i=document.activeElement;function u(){return Array.from(o.querySelectorAll(v)).filter(e=>!e.hasAttribute("disabled")&&e.offsetParent!==null)}function c(e){if(!t||e.key!=="Tab")return;const s=u();if(!s.length){e.preventDefault();return}const d=s[0],l=s[s.length-1],a=document.activeElement;e.shiftKey?(a===d||!o.contains(a))&&(e.preventDefault(),l.focus()):(a===l||!o.contains(a))&&(e.preventDefault(),d.focus())}function p(){if(t)return;t=!0,i=document.activeElement,document.addEventListener("keydown",c,!0);const e=u()[0]??o;requestAnimationFrame(()=>e.focus())}function f(){if(!t)return;t=!1,document.removeEventListener("keydown",c,!0);const e=r??i;e&&typeof e.focus=="function"&&requestAnimationFrame(()=>e.focus())}return{activate:p,deactivate:f,destroy:f}}let n=null;function g(){return n||(n=document.getElementById(m),n||(n=document.createElement("div"),n.id=m,n.setAttribute("aria-live","polite"),n.setAttribute("aria-atomic","true"),Object.assign(n.style,{position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap",border:"0",padding:"0",margin:"-1px"}),document.body.appendChild(n)),n)}function h(o,r=80){const t=g();t.textContent="",setTimeout(()=>{t.textContent=o},r)}function b(o,r){function t(i){const u=i.target;o.some(c=>c.contains(u))||r(i)}return document.addEventListener("pointerdown",t,!0),()=>document.removeEventListener("pointerdown",t,!0)}export{h as announce,y as createFocusTrap,b as onClickOutside};

package/dist/utils/position.js

@@ -1 +1 @@
-function p(t){if(t==="autoVertical")return{side:"bottom",alignment:null};const[o,n=null]=t.split("-");return{side:o,alignment:n}}const S={top:"bottom",bottom:"top",left:"right",right:"left"};function f(t,o,n,i,e,h){let l,s;switch(n){case"bottom":s=t.bottom+e;break;case"top":s=t.top-o.height-e;break;case"left":l=t.left-o.width-e;break;case"right":l=t.right+e;break}if(n==="top"||n==="bottom"){const d=h?t.right-o.width:t.left,r=h?t.left:t.right-o.width;i==="start"?l=d:i==="end"?l=r:l=t.left+(t.width-o.width)/2}else i==="start"?s=t.top:i==="end"?s=t.bottom-o.height:s=t.top+(t.height-o.height)/2;return{x:l,y:s}}function v(t){return getComputedStyle(t).direction==="rtl"?"rtl":"ltr"}function w(t,o,n,i=6){return Math.max(i,Math.min(n-o-i,t))}function x(t,o,n,i,e){const h=window.innerWidth,l=window.innerHeight;switch(t){case"bottom":return o.bottom+e+n<=l?"bottom":"top";case"top":return o.top-e-n>=0?"top":"bottom";case"right":return o.right+e+i<=h?"right":"left";case"left":return o.left-e-i>=0?"left":"right"}}function P(t,o,n,i){const e=t.getBoundingClientRect(),h=o.getBoundingClientRect(),l=window.innerWidth,s=window.innerHeight,d=v(t)==="rtl";let{side:r,alignment:c}=p(n);const u=x(r,e,h.height,h.width,i),b=n==="autoVertical"?u==="top"?"top":"bottom":u===r?n:c?`${u}-${c}`:u;let{x:m,y:a}=f(e,h,u,c,i,d);return u==="top"||u==="bottom"?m=w(m,h.width,l):a=w(a,h.height,s),{x:m,y:a,placement:b}}export{P as computePosition,v as getDirection,p as parsePlacement};
+function w(t){if(t==="autoVertical")return{side:"bottom",alignment:null};const[o,i=null]=t.split("-");return{side:o,alignment:i}}function P(t,o,i,l,u,c,e){let n,s;switch(l){case"bottom":s=t.bottom+c;break;case"top":s=t.top-i-c;break;case"left":n=t.left-o-c;break;case"right":n=t.right+c;break}if(l==="top"||l==="bottom"){const h=e?t.right-o:t.left,b=e?t.left:t.right-o;u==="start"?n=h:u==="end"?n=b:n=t.left+(t.width-o)/2}else u==="start"?s=t.top:u==="end"?s=t.bottom-i:s=t.top+(t.height-i)/2;return{x:n,y:s}}function k(t){return getComputedStyle(t).direction==="rtl"?"rtl":"ltr"}function p(t,o,i,l=6){return Math.max(l,Math.min(i-o-l,t))}const v={top:"bottom",bottom:"top",left:"right",right:"left"};function y(t,o,i,l,u,c,e,n=0){switch(t){case"bottom":return o.bottom+u+i+n<=e;case"top":return o.top-u-i-n>=0;case"right":return o.right+u+l+n<=c;case"left":return o.left-u-l-n>=0}}const A=24;function I(t,o,i,l,u,c,e,n){const s=v[t],h=(b,f=0)=>y(b,o,i,l,u,c,e,f);return n===s?h(t,A)?t:h(s)?s:t:h(t)?t:h(s)?s:n??t}function _(t,o,i,l,u){const c=t.getBoundingClientRect(),e=o.offsetWidth,n=o.offsetHeight,s=window.innerWidth,h=window.innerHeight,b=k(t)==="rtl";let{side:f,alignment:m}=w(i);const x=u?w(u).side:null,a=I(f,c,n,e,l,s,h,x),S=i==="autoVertical"?a==="top"?"top":"bottom":a===f?i:m?`${a}-${m}`:a;let{x:d,y:r}=P(c,e,n,a,m,l,b);return a==="top"||a==="bottom"?d=p(d,e,s):r=p(r,n,h),{x:d,y:r,placement:S}}export{_ as computePosition,k as getDirection,w as parsePlacement};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popover-kit/svelte",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "keywords": [
     "svelte",
@@ -34,9 +34,6 @@
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
-  "dependencies": {
-    "lucide-svelte": "^0.462.0"
-  },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -63,7 +60,6 @@
     "typecheck": "svelte-check --tsconfig ./tsconfig.json",
     "typecheck:test": "tsc -p tsconfig.test.json",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnlyx": "pnpm run typecheck && pnpm run test && pnpm run build"
+    "test:watch": "vitest"
   }
 }