@data-slot/popover 0.2.30 → 0.2.31

package/README.md

@@ -47,7 +47,12 @@ import { createPopover } from "@data-slot/popover";
 
 const popover = createPopover(element, {
   defaultOpen: false,
-  position: "bottom",
+  side: "bottom",
+  align: "center",
+  sideOffset: 4,
+  alignOffset: 0,
+  avoidCollisions: true,
+  collisionPadding: 8,
   closeOnClickOutside: true,
   closeOnEscape: true,
   onOpenChange: (open) => console.log(open),
@@ -59,7 +64,13 @@ const popover = createPopover(element, {
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `defaultOpen` | `boolean` | `false` | Initial open state |
-| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Position relative to trigger |
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | Preferred side relative to trigger |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Preferred alignment on the side axis |
+| `sideOffset` | `number` | `4` | Distance from trigger in pixels |
+| `alignOffset` | `number` | `0` | Offset from alignment edge in pixels |
+| `avoidCollisions` | `boolean` | `true` | Flip/shift to stay in viewport |
+| `collisionPadding` | `number` | `8` | Viewport edge padding in pixels |
+| `position` | `"top" \| "bottom" \| "left" \| "right"` | - | Deprecated alias for `side` |
 | `closeOnClickOutside` | `boolean` | `true` | Close when clicking outside |
 | `closeOnEscape` | `boolean` | `true` | Close when pressing Escape |
 | `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when open state changes |
@@ -102,17 +113,25 @@ Options can also be set via data attributes on the root element. JS options take
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `data-default-open` | boolean | `false` | Initial open state |
+| `data-side` | string | `"bottom"` | Preferred side |
+| `data-align` | string | `"center"` | Preferred alignment |
+| `data-side-offset` | number | `4` | Distance from trigger (px) |
+| `data-align-offset` | number | `0` | Offset from alignment edge (px) |
+| `data-avoid-collisions` | boolean | `true` | Flip/shift to stay in viewport |
+| `data-collision-padding` | number | `8` | Viewport edge padding (px) |
 | `data-close-on-click-outside` | boolean | `true` | Close when clicking outside |
 | `data-close-on-escape` | boolean | `true` | Close when pressing Escape |
 
 Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
 
-Position is set via `data-position` on the content element:
+Placement can be set on root or content (content takes precedence):
 
 ```html
-<div data-slot="popover-content" data-position="top">
+<div data-slot="popover-content" data-side="top" data-align="end">
 ```
 
+`data-position` is still supported as a deprecated fallback alias for `data-side`.
+
 ```html
 <!-- Popover that stays open when clicking outside -->
 <div data-slot="popover" data-close-on-click-outside="false">
@@ -122,7 +141,8 @@ Position is set via `data-position` on the content element:
 
 ## Styling
 
-Use `data-state` and `data-position` attributes:
+Popover position is computed in JavaScript and applied as `position: fixed` + inline `top/left`.
+Use `data-state`, `data-side`, and `data-align` for styling/animation:
 
 ```css
 /* Hidden state */
@@ -130,48 +150,35 @@ Use `data-state` and `data-position` attributes:
   display: none;
 }
 
-/* Positioning */
-[data-slot="popover"] {
-  position: relative;
-}
-
 [data-slot="popover-content"] {
-  position: absolute;
+  position: fixed;
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
 }
 
-[data-slot="popover-content"][data-position="top"] {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
+[data-slot="popover-content"][hidden][data-side="top"] {
+  transform: translateY(4px);
 }
-
-[data-slot="popover-content"][data-position="bottom"] {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
+[data-slot="popover-content"][hidden][data-side="bottom"] {
+  transform: translateY(-4px);
 }
-
-[data-slot="popover-content"][data-position="left"] {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
+[data-slot="popover-content"][hidden][data-side="left"] {
+  transform: translateX(4px);
 }
-
-[data-slot="popover-content"][data-position="right"] {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
+[data-slot="popover-content"][hidden][data-side="right"] {
+  transform: translateX(-4px);
 }
 ```
 
 With Tailwind:
 
 ```html
-<div data-slot="popover" class="relative">
+<div data-slot="popover">
   <button data-slot="popover-trigger">Open</button>
-  <div 
-    data-slot="popover-content" 
-    class="absolute top-full left-1/2 -translate-x-1/2 mt-2 bg-white shadow-lg rounded-lg p-4 hidden data-[state=open]:block"
+  <div
+    data-slot="popover-content"
+    data-side="bottom"
+    data-align="start"
+    class="fixed bg-white shadow-lg rounded-lg p-4 transition data-[state=closed]:opacity-0"
   >
     Content
   </div>
@@ -228,7 +235,11 @@ element.dispatchEvent(
 
 #### Deprecated Shapes
 
-The following shape is deprecated and will be removed in v1.0:
+The following shapes are deprecated and will be removed in the next major release:
+
+- `popover:set` detail `{ value: boolean }` (use `{ open: boolean }`)
+- `position` option (use `side`)
+- `data-position` attribute (use `data-side`)
 
 ```javascript
 // Deprecated: { value: boolean }
@@ -237,9 +248,8 @@ element.dispatchEvent(
 );
 ```
 
-Use `{ open: boolean }` instead.
+Use the replacements listed above.
 
 ## License
 
 MIT
-

package/dist/index.cjs

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}const d=new WeakMap,f=Symbol.for(`data-slot.portal-owner`),p=e=>e[f]??d.get(e);function m(e,t){return h(e,t,new Set)}function h(e,t,n){if(!t)return!1;let r=t instanceof Element?t:t.parentElement;if(!r)return!1;if(e.contains(r))return!0;let i=r;for(;i;){let t=p(i);if(t&&!n.has(t)&&(n.add(t),h(e,t,n)))return!0;i=i.parentElement}return!1}let g=0;const _=(e,t)=>e.id||=`${t}-${++g}`,v=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function y(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const b=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),x=[`top`,`bottom`,`left`,`right`],S=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function C(t,n={}){let r=e(t,`popover-trigger`),i=e(t,`popover-content`),a=e(t,`popover-close`);if(!r||!i)throw Error(`Popover requires trigger and content slots`);let o=n.defaultOpen??l(t,`defaultOpen`)??!1,s=n.onOpenChange,c=n.closeOnClickOutside??l(t,`closeOnClickOutside`)??!0,d=n.closeOnEscape??l(t,`closeOnEscape`)??!0,f=n.position??u(i,`position`,x)??u(t,`position`,x)??`bottom`,p=o,h=[],g=null,C=!1,w=()=>{C&&(i.removeAttribute(`tabindex`),C=!1)},T=()=>{let e=i.querySelector(`[autofocus]`);if(e)return e.focus();let t=i.querySelector(S);if(t)return t.focus();i.getAttribute(`tabindex`)||(i.setAttribute(`tabindex`,`-1`),C=!0),i.focus()},E=_(i,`popover-content`);r.setAttribute(`aria-haspopup`,`dialog`),r.setAttribute(`aria-controls`,E),i.setAttribute(`data-position`,f);let D=e=>{p!==e&&(e&&(g=document.activeElement),p=e,v(r,`expanded`,p),i.hidden=!p,t.setAttribute(`data-state`,p?`open`:`closed`),i.setAttribute(`data-state`,p?`open`:`closed`),b(t,`popover:change`,{open:p}),s?.(p),e?requestAnimationFrame(T):(w(),requestAnimationFrame(()=>{g&&g.isConnected?g.focus():r.focus(),g=null})))};v(r,`expanded`,p),i.hidden=!p,t.setAttribute(`data-state`,p?`open`:`closed`),i.setAttribute(`data-state`,p?`open`:`closed`),o&&requestAnimationFrame(T),h.push(y(r,`click`,()=>D(!p))),a&&h.push(y(a,`click`,()=>D(!1))),c&&h.push(y(document,`pointerdown`,e=>{if(!p)return;let n=e.target;m(t,n)||D(!1)})),d&&h.push(y(document,`keydown`,e=>{p&&e.key===`Escape`&&(e.preventDefault(),D(!1))})),h.push(y(t,`popover:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&D(n)}));let O={open:()=>D(!0),close:()=>D(!1),toggle:()=>D(!p),get isOpen(){return p},destroy:()=>{h.forEach(e=>e()),h.length=0,w()}};return O}const w=new WeakSet;function T(e=document){let n=[];for(let r of t(e,`popover`)){if(w.has(r))continue;w.add(r),n.push(C(r))}return n}exports.create=T,exports.createPopover=C;
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`@data-slot/core`)),l=[`top`,`right`,`bottom`,`left`],u=[`start`,`center`,`end`],d=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function f(e,t={}){let n=(0,c.getPart)(e,`popover-trigger`),r=(0,c.getPart)(e,`popover-content`),i=(0,c.getPart)(e,`popover-close`);if(!n||!r)throw Error(`Popover requires trigger and content slots`);let a=t.defaultOpen??(0,c.getDataBool)(e,`defaultOpen`)??!1,o=t.onOpenChange,s=t.closeOnClickOutside??(0,c.getDataBool)(e,`closeOnClickOutside`)??!0,f=t.closeOnEscape??(0,c.getDataBool)(e,`closeOnEscape`)??!0,p=t.position??(0,c.getDataEnum)(r,`position`,l)??(0,c.getDataEnum)(e,`position`,l),m=t.side??(0,c.getDataEnum)(r,`side`,l)??(0,c.getDataEnum)(e,`side`,l)??p??`bottom`,h=t.align??(0,c.getDataEnum)(r,`align`,u)??(0,c.getDataEnum)(e,`align`,u)??`center`,g=t.sideOffset??(0,c.getDataNumber)(r,`sideOffset`)??(0,c.getDataNumber)(e,`sideOffset`)??4,_=t.alignOffset??(0,c.getDataNumber)(r,`alignOffset`)??(0,c.getDataNumber)(e,`alignOffset`)??0,v=t.avoidCollisions??(0,c.getDataBool)(r,`avoidCollisions`)??(0,c.getDataBool)(e,`avoidCollisions`)??!0,y=t.collisionPadding??(0,c.getDataNumber)(r,`collisionPadding`)??(0,c.getDataNumber)(e,`collisionPadding`)??8,b=a,x=[],S=null,C=!1,w=()=>{C&&(r.removeAttribute(`tabindex`),C=!1)},T=()=>{let e=r.querySelector(`[autofocus]`);if(e)return e.focus();let t=r.querySelector(d);if(t)return t.focus();r.getAttribute(`tabindex`)||(r.setAttribute(`tabindex`,`-1`),C=!0),r.focus()},E=(0,c.ensureId)(r,`popover-content`);n.setAttribute(`aria-haspopup`,`dialog`),n.setAttribute(`aria-controls`,E),r.setAttribute(`data-side`,m),r.setAttribute(`data-align`,h),r.setAttribute(`data-position`,m);let D=()=>{let t=e.ownerDocument.defaultView??window,i=n.getBoundingClientRect(),a=r.getBoundingClientRect(),o=(0,c.computeFloatingPosition)({anchorRect:i,contentRect:a,side:m,align:h,sideOffset:g,alignOffset:_,avoidCollisions:v,collisionPadding:y});r.style.position=`absolute`,r.style.top=`${o.y+t.scrollY}px`,r.style.left=`${o.x+t.scrollX}px`,r.style.margin=`0`,r.setAttribute(`data-side`,o.side),r.setAttribute(`data-align`,o.align),r.setAttribute(`data-position`,o.side)},O=(0,c.createPositionSync)({observedElements:[n,r],isActive:()=>b,ancestorScroll:!1,onUpdate:D}),k=t=>{b!==t&&(t&&(S=document.activeElement),b=t,(0,c.setAria)(n,`expanded`,b),(0,c.emit)(e,`popover:change`,{open:b}),o?.(b),t?(r.hidden=!1,e.setAttribute(`data-state`,`open`),r.setAttribute(`data-state`,`open`),D(),O.start(),O.update(),requestAnimationFrame(T)):(O.stop(),r.hidden=!0,e.setAttribute(`data-state`,`closed`),r.setAttribute(`data-state`,`closed`),w(),requestAnimationFrame(()=>{S&&S.isConnected?S.focus():n.focus(),S=null})))};(0,c.setAria)(n,`expanded`,b),r.hidden=!b,e.setAttribute(`data-state`,b?`open`:`closed`),r.setAttribute(`data-state`,b?`open`:`closed`),a&&(D(),O.start(),O.update(),requestAnimationFrame(T)),x.push((0,c.on)(n,`click`,()=>k(!b))),i&&x.push((0,c.on)(i,`click`,()=>k(!1))),x.push((0,c.createDismissLayer)({root:e,isOpen:()=>b,onDismiss:()=>k(!1),closeOnClickOutside:s,closeOnEscape:f})),x.push((0,c.on)(e,`popover:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&k(n)}));let A={open:()=>k(!0),close:()=>k(!1),toggle:()=>k(!b),get isOpen(){return b},destroy:()=>{O.stop(),x.forEach(e=>e()),x.length=0,w()}};return A}const p=new WeakSet;function m(e=document){let t=[];for(let n of(0,c.getRoots)(e,`popover`)){if(p.has(n))continue;p.add(n),t.push(f(n))}return t}exports.create=m,exports.createPopover=f;

package/dist/index.d.cts

@@ -1,10 +1,31 @@
 //#region src/index.d.ts
-type PopoverPosition = "top" | "bottom" | "left" | "right";
+type PopoverSide = "top" | "right" | "bottom" | "left";
+type PopoverAlign = "start" | "center" | "end";
+/**
+ * @deprecated Use `PopoverSide` and `side` option instead.
+ * Kept for backward compatibility and planned for removal in the next major.
+ */
+type PopoverPosition = PopoverSide;
 interface PopoverOptions {
   /** Initial open state */
   defaultOpen?: boolean;
-  /** Position of popover relative to trigger */
+  /**
+   * @deprecated Use `side` instead.
+   * TODO(next-major): remove `position` option support and migrate callers to `side`.
+   */
   position?: PopoverPosition;
+  /** The preferred side of the trigger to render against. @default "bottom" */
+  side?: PopoverSide;
+  /** The preferred alignment against the trigger. @default "center" */
+  align?: PopoverAlign;
+  /** The distance in pixels from the trigger. @default 4 */
+  sideOffset?: number;
+  /** Offset in pixels from the alignment edge. @default 0 */
+  alignOffset?: number;
+  /** When true, flips/shifts content to avoid viewport collisions. @default true */
+  avoidCollisions?: boolean;
+  /** Viewport padding used when avoiding collisions. @default 8 */
+  collisionPadding?: number;
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
   /** Close when clicking outside */
@@ -45,4 +66,4 @@ declare function createPopover(root: Element, options?: PopoverOptions): Popover
  */
 declare function create(scope?: ParentNode): PopoverController[];
 //#endregion
-export { PopoverController, PopoverOptions, PopoverPosition, create, createPopover };
+export { PopoverAlign, PopoverController, PopoverOptions, PopoverPosition, PopoverSide, create, createPopover };

package/dist/index.d.ts

@@ -1,10 +1,31 @@
 //#region src/index.d.ts
-type PopoverPosition = "top" | "bottom" | "left" | "right";
+type PopoverSide = "top" | "right" | "bottom" | "left";
+type PopoverAlign = "start" | "center" | "end";
+/**
+ * @deprecated Use `PopoverSide` and `side` option instead.
+ * Kept for backward compatibility and planned for removal in the next major.
+ */
+type PopoverPosition = PopoverSide;
 interface PopoverOptions {
   /** Initial open state */
   defaultOpen?: boolean;
-  /** Position of popover relative to trigger */
+  /**
+   * @deprecated Use `side` instead.
+   * TODO(next-major): remove `position` option support and migrate callers to `side`.
+   */
   position?: PopoverPosition;
+  /** The preferred side of the trigger to render against. @default "bottom" */
+  side?: PopoverSide;
+  /** The preferred alignment against the trigger. @default "center" */
+  align?: PopoverAlign;
+  /** The distance in pixels from the trigger. @default 4 */
+  sideOffset?: number;
+  /** Offset in pixels from the alignment edge. @default 0 */
+  alignOffset?: number;
+  /** When true, flips/shifts content to avoid viewport collisions. @default true */
+  avoidCollisions?: boolean;
+  /** Viewport padding used when avoiding collisions. @default 8 */
+  collisionPadding?: number;
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
   /** Close when clicking outside */
@@ -45,4 +66,4 @@ declare function createPopover(root: Element, options?: PopoverOptions): Popover
  */
 declare function create(scope?: ParentNode): PopoverController[];
 //#endregion
-export { PopoverController, PopoverOptions, PopoverPosition, create, createPopover };
+export { PopoverAlign, PopoverController, PopoverOptions, PopoverPosition, PopoverSide, create, createPopover };

package/dist/index.js

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}const d=new WeakMap,f=Symbol.for(`data-slot.portal-owner`),p=e=>e[f]??d.get(e);function m(e,t){return h(e,t,new Set)}function h(e,t,n){if(!t)return!1;let r=t instanceof Element?t:t.parentElement;if(!r)return!1;if(e.contains(r))return!0;let i=r;for(;i;){let t=p(i);if(t&&!n.has(t)&&(n.add(t),h(e,t,n)))return!0;i=i.parentElement}return!1}let g=0;const _=(e,t)=>e.id||=`${t}-${++g}`,v=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function y(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const b=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),x=[`top`,`bottom`,`left`,`right`],S=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function C(t,n={}){let r=e(t,`popover-trigger`),i=e(t,`popover-content`),a=e(t,`popover-close`);if(!r||!i)throw Error(`Popover requires trigger and content slots`);let o=n.defaultOpen??l(t,`defaultOpen`)??!1,s=n.onOpenChange,c=n.closeOnClickOutside??l(t,`closeOnClickOutside`)??!0,d=n.closeOnEscape??l(t,`closeOnEscape`)??!0,f=n.position??u(i,`position`,x)??u(t,`position`,x)??`bottom`,p=o,h=[],g=null,C=!1,w=()=>{C&&(i.removeAttribute(`tabindex`),C=!1)},T=()=>{let e=i.querySelector(`[autofocus]`);if(e)return e.focus();let t=i.querySelector(S);if(t)return t.focus();i.getAttribute(`tabindex`)||(i.setAttribute(`tabindex`,`-1`),C=!0),i.focus()},E=_(i,`popover-content`);r.setAttribute(`aria-haspopup`,`dialog`),r.setAttribute(`aria-controls`,E),i.setAttribute(`data-position`,f);let D=e=>{p!==e&&(e&&(g=document.activeElement),p=e,v(r,`expanded`,p),i.hidden=!p,t.setAttribute(`data-state`,p?`open`:`closed`),i.setAttribute(`data-state`,p?`open`:`closed`),b(t,`popover:change`,{open:p}),s?.(p),e?requestAnimationFrame(T):(w(),requestAnimationFrame(()=>{g&&g.isConnected?g.focus():r.focus(),g=null})))};v(r,`expanded`,p),i.hidden=!p,t.setAttribute(`data-state`,p?`open`:`closed`),i.setAttribute(`data-state`,p?`open`:`closed`),o&&requestAnimationFrame(T),h.push(y(r,`click`,()=>D(!p))),a&&h.push(y(a,`click`,()=>D(!1))),c&&h.push(y(document,`pointerdown`,e=>{if(!p)return;let n=e.target;m(t,n)||D(!1)})),d&&h.push(y(document,`keydown`,e=>{p&&e.key===`Escape`&&(e.preventDefault(),D(!1))})),h.push(y(t,`popover:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&D(n)}));let O={open:()=>D(!0),close:()=>D(!1),toggle:()=>D(!p),get isOpen(){return p},destroy:()=>{h.forEach(e=>e()),h.length=0,w()}};return O}const w=new WeakSet;function T(e=document){let n=[];for(let r of t(e,`popover`)){if(w.has(r))continue;w.add(r),n.push(C(r))}return n}export{T as create,C as createPopover};
+import{computeFloatingPosition as e,createDismissLayer as t,createPositionSync as n,emit as r,ensureId as i,getDataBool as a,getDataEnum as o,getDataNumber as s,getPart as c,getRoots as l,on as u,setAria as d}from"@data-slot/core";const f=[`top`,`right`,`bottom`,`left`],p=[`start`,`center`,`end`],m=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`;function h(l,h={}){let g=c(l,`popover-trigger`),_=c(l,`popover-content`),v=c(l,`popover-close`);if(!g||!_)throw Error(`Popover requires trigger and content slots`);let y=h.defaultOpen??a(l,`defaultOpen`)??!1,b=h.onOpenChange,x=h.closeOnClickOutside??a(l,`closeOnClickOutside`)??!0,S=h.closeOnEscape??a(l,`closeOnEscape`)??!0,C=h.position??o(_,`position`,f)??o(l,`position`,f),w=h.side??o(_,`side`,f)??o(l,`side`,f)??C??`bottom`,T=h.align??o(_,`align`,p)??o(l,`align`,p)??`center`,E=h.sideOffset??s(_,`sideOffset`)??s(l,`sideOffset`)??4,D=h.alignOffset??s(_,`alignOffset`)??s(l,`alignOffset`)??0,O=h.avoidCollisions??a(_,`avoidCollisions`)??a(l,`avoidCollisions`)??!0,k=h.collisionPadding??s(_,`collisionPadding`)??s(l,`collisionPadding`)??8,A=y,j=[],M=null,N=!1,P=()=>{N&&(_.removeAttribute(`tabindex`),N=!1)},F=()=>{let e=_.querySelector(`[autofocus]`);if(e)return e.focus();let t=_.querySelector(m);if(t)return t.focus();_.getAttribute(`tabindex`)||(_.setAttribute(`tabindex`,`-1`),N=!0),_.focus()},I=i(_,`popover-content`);g.setAttribute(`aria-haspopup`,`dialog`),g.setAttribute(`aria-controls`,I),_.setAttribute(`data-side`,w),_.setAttribute(`data-align`,T),_.setAttribute(`data-position`,w);let L=()=>{let t=l.ownerDocument.defaultView??window,n=g.getBoundingClientRect(),r=_.getBoundingClientRect(),i=e({anchorRect:n,contentRect:r,side:w,align:T,sideOffset:E,alignOffset:D,avoidCollisions:O,collisionPadding:k});_.style.position=`absolute`,_.style.top=`${i.y+t.scrollY}px`,_.style.left=`${i.x+t.scrollX}px`,_.style.margin=`0`,_.setAttribute(`data-side`,i.side),_.setAttribute(`data-align`,i.align),_.setAttribute(`data-position`,i.side)},R=n({observedElements:[g,_],isActive:()=>A,ancestorScroll:!1,onUpdate:L}),z=e=>{A!==e&&(e&&(M=document.activeElement),A=e,d(g,`expanded`,A),r(l,`popover:change`,{open:A}),b?.(A),e?(_.hidden=!1,l.setAttribute(`data-state`,`open`),_.setAttribute(`data-state`,`open`),L(),R.start(),R.update(),requestAnimationFrame(F)):(R.stop(),_.hidden=!0,l.setAttribute(`data-state`,`closed`),_.setAttribute(`data-state`,`closed`),P(),requestAnimationFrame(()=>{M&&M.isConnected?M.focus():g.focus(),M=null})))};d(g,`expanded`,A),_.hidden=!A,l.setAttribute(`data-state`,A?`open`:`closed`),_.setAttribute(`data-state`,A?`open`:`closed`),y&&(L(),R.start(),R.update(),requestAnimationFrame(F)),j.push(u(g,`click`,()=>z(!A))),v&&j.push(u(v,`click`,()=>z(!1))),j.push(t({root:l,isOpen:()=>A,onDismiss:()=>z(!1),closeOnClickOutside:x,closeOnEscape:S})),j.push(u(l,`popover:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&z(n)}));let B={open:()=>z(!0),close:()=>z(!1),toggle:()=>z(!A),get isOpen(){return A},destroy:()=>{R.stop(),j.forEach(e=>e()),j.length=0,P()}};return B}const g=new WeakSet;function _(e=document){let t=[];for(let n of l(e,`popover`)){if(g.has(n))continue;g.add(n),t.push(h(n))}return t}export{_ as create,h as createPopover};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/popover",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -24,9 +24,6 @@
   "scripts": {
     "build": "tsdown"
   },
-  "devDependencies": {
-    "@data-slot/core": "workspace:*"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/bejamas/data-slot",
@@ -39,5 +36,8 @@
     "vanilla",
     "data-slot"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@data-slot/core": "workspace:*"
+  }
 }