@primitiv-ui/web 0.1.54 → 0.1.55

package/README.md

@@ -6,7 +6,7 @@ framework and no runtime dependencies beyond
 server-rendered stack (HTMX, Rails, Django, Laravel, Spring …), and inside
 React, Vue, Angular or any other framework.
 
-> **Status: published.** Tabs, Accordion, Collapsible and Modal so far. See
+> **Status: published.** Tabs, Accordion, Collapsible, Modal and Popover so far. See
 > [RFC 0033](../../docs/rfcs/0033-web-components.md) for the design.
 
 ## Components
@@ -17,6 +17,7 @@ React, Vue, Angular or any other framework.
 | Accordion | `primitiv-accordion`, `-item`, `-trigger`, `-content`, `-trigger-icon` | `primitiv-accordion-change` | 0.1.44 |
 | Collapsible | `primitiv-collapsible`, `-trigger`, `-content`, `-trigger-icon` | `primitiv-collapsible-change` | 0.1.47 |
 | Modal | `primitiv-modal`, `-trigger`, `-content`, `-title`, `-description`, `-close` | `primitiv-modal-change` | 0.1.54 |
+| Popover | `primitiv-popover`, `-trigger`, `-anchor`, `-content`, `-title`, `-description`, `-close` | `primitiv-popover-change` | 0.1.55 |
 
 ## Use it
 
@@ -49,9 +50,9 @@ downloads it once. `dist/primitiv-web.js` is the alternative: every element in
 one file. Per-component files ship from 0.1.43.
 
 The main entry (`@primitiv-ui/web`, `/tabs`, `/accordion`, `/collapsible`,
-`/modal`) exports the classes and `defineTabs(registry?)` /
+`/modal`, `/popover`) exports the classes and `defineTabs(registry?)` /
 `defineAccordion(registry?)` / `defineCollapsible(registry?)` /
-`defineModal(registry?)` with **no side effects**.
+`defineModal(registry?)` / `definePopover(registry?)` with **no side effects**.
 
 **Render `hidden` on inactive panels yourself.** Until the module loads, CSS
 cannot tell which panel is active, so markup that omits it shows every panel.
@@ -154,6 +155,34 @@ on a panel as it becomes active, for lazy loading.
   press, a `<form method="dialog">` — so `preventDefault()` keeps a dirty form
   open.
 
+### Popover
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/popover.js"></script>
+
+<primitiv-popover>
+  <primitiv-popover-trigger><button type="button">Share</button></primitiv-popover-trigger>
+  <primitiv-popover-content popover="auto">
+    <primitiv-popover-title><h2>Share this page</h2></primitiv-popover-title>
+    <primitiv-popover-description><p>Anyone with the link can view it.</p></primitiv-popover-description>
+    <primitiv-popover-close><button type="button">Done</button></primitiv-popover-close>
+  </primitiv-popover-content>
+</primitiv-popover>
+```
+
+- **It is a native `popover="auto"` panel**: the browser supplies the top layer
+  and light dismiss. The element adds `role="dialog"` and the trigger's ARIA,
+  moves focus into the panel on open, and closes it on Escape with focus back on
+  the trigger. Write `popover="auto"` yourself so the panel is hidden before the
+  script loads.
+- **No anchor wiring.** The panel is shown with its trigger as its source (or
+  the element inside `<primitiv-popover-anchor>`), which makes it the implicit
+  anchor, so CSS anchor positioning (`position-area`) places it with no
+  `anchor-name` / `position-anchor` pair.
+- **`open` on the root is the state**; the `open` property reads and sets it.
+  **Listen with `primitiv-popover-change`** (bubbles, cancelable, `detail: {
+  open }`), fired before every user-driven change, a light dismiss included.
+
 **TypeScript** — opt into the tag map so DOM queries return the element classes:
 `import type {} from "@primitiv-ui/web/tags"` (npm only).
 

package/dist/cdn/chunks/chunk-PKW6AKXD.js

@@ -0,0 +1 @@
+var t=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");export{t as a};

package/dist/cdn/modal.js

@@ -1 +1 @@
-import{a as l,b as i,c as h,d as L,f as M}from"./chunks/chunk-QVNDDONZ.js";var C=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");function H({key:n,shiftKey:t,active:e,count:o}){if(n!=="Tab")return null;if(o===0)return{focus:null};let r=o-1;return!t&&e===r?{focus:0}:t&&e===0?{focus:r}:null}function O(n,t){return t.x<n.left||t.x>n.right||t.y<n.top||t.y>n.bottom}var d=class{#e;#t;#n=null;constructor(t,e){this.#e=t,this.#t=e}connect(){if(this.#n)return;this.#n=new AbortController;let{signal:t}=this.#n,e=this.#e;e.addEventListener("close",()=>this.#t.change(!1),{signal:t}),e.addEventListener("cancel",o=>this.#i(o),{signal:t}),e.addEventListener("pointerdown",o=>this.#o(o),{signal:t}),e.addEventListener("keydown",o=>this.#s(o),{signal:t})}disconnect(){this.#n?.abort(),this.#n=null}sync(){let{open:t}=this.#t.state();t&&!this.#e.open?this.#e.showModal():!t&&this.#e.open&&this.#e.close()}#i(t){this.#t.escapeKeyDown?.(t);let e=t.defaultPrevented;t.preventDefault(),e||this.#t.change(!1)}#o(t){let e={x:t.clientX,y:t.clientY};O(this.#e.getBoundingClientRect(),e)&&(this.#t.pointerDownOutside?.(t),t.defaultPrevented||this.#t.change(!1))}#s(t){if(!this.#e.open)return;let e=[...this.#e.querySelectorAll(C)],o=H({key:t.key,shiftKey:t.shiftKey,active:e.indexOf(document.activeElement),count:e.length});o&&(t.preventDefault(),o.focus!==null&&e[o.focus].focus())}};var k="primitiv-modal",w="primitiv-modal-trigger",v="primitiv-modal-content",D="primitiv-modal-title",R="primitiv-modal-description",A="primitiv-modal-close";function p(n,t){return n.childElementCount===1?n.firstElementChild:(h(n,`<${n.localName}> needs exactly one element child (${t}) to decorate.`),null)}function K(n){let t=n.firstElementChild;return n.childElementCount===1&&t instanceof HTMLDialogElement?t:(h(n,`<${v}> needs exactly one <dialog> child to decorate.`),null)}var f=class extends M{#e=null;#t=null;#n=[];#i=[];#o=null;controller={connect:()=>this.#a(),disconnect:()=>this.#c()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#s(){return{state:()=>({open:this.open}),change:t=>this.#l(t)}}#l(t){t!==this.open&&(this.announce("primitiv-modal-change",{open:t})?this.open=t:this.#t?.sync())}#a(){this.#o=new AbortController,this.addEventListener("click",t=>this.#d(t),{signal:this.#o.signal}),this.#t?.connect()}#c(){this.#o.abort(),this.#o=null,this.#t?.disconnect(),this.#e&&i(this.#e,"open",null)}#d(t){let e=t.target;this.#n.some(o=>o.contains(e))?this.#l(!0):this.#i.some(o=>o.contains(e))&&this.#l(!1)}#u(t){t!==this.#e&&(this.#t?.disconnect(),t&&i(t,"open",null),this.#e=t,this.#t=t?new d(t,this.#s()):null,this.#t?.connect())}reconcile(){let t=this.open,e=t?"open":"closed",o=this.rootId();i(this,"data-state",e);let[r]=this.parts(v),s=r?K(r):null,[x]=this.parts(D),a=x?p(x,"a heading"):null,[T]=this.parts(R),c=T?p(T,"a <p>"):null;a&&!a.id&&(a.id=`${o}-title`),c&&!c.id&&(c.id=`${o}-description`),s&&(s.id||(s.id=`${o}-content`),i(s,"data-state",e),i(s,"aria-labelledby",a?a.id:null),i(s,"aria-describedby",c?c.id:null)),this.#n=this.#r(w);for(let u of this.#n)i(u,"aria-haspopup","dialog"),i(u,"aria-expanded",String(t)),i(u,"aria-controls",s?s.id:null);this.#i=this.#r(A),this.#u(s),this.#t?.sync()}#r(t){return this.parts(t).flatMap(e=>p(e,"a <button>")??[])}},m=class extends l{},b=class extends l{},E=class extends l{},g=class extends l{},y=class extends l{};function S(n=globalThis.customElements){L(n,[[k,f],[w,m],[v,b],[D,E],[R,g],[A,y]])}S();
+import{a as H}from"./chunks/chunk-PKW6AKXD.js";import{a as l,b as i,c as h,d as M,f as L}from"./chunks/chunk-QVNDDONZ.js";function C({key:n,shiftKey:t,active:e,count:o}){if(n!=="Tab")return null;if(o===0)return{focus:null};let r=o-1;return!t&&e===r?{focus:0}:t&&e===0?{focus:r}:null}function O(n,t){return t.x<n.left||t.x>n.right||t.y<n.top||t.y>n.bottom}var d=class{#e;#t;#n=null;constructor(t,e){this.#e=t,this.#t=e}connect(){if(this.#n)return;this.#n=new AbortController;let{signal:t}=this.#n,e=this.#e;e.addEventListener("close",()=>this.#t.change(!1),{signal:t}),e.addEventListener("cancel",o=>this.#i(o),{signal:t}),e.addEventListener("pointerdown",o=>this.#o(o),{signal:t}),e.addEventListener("keydown",o=>this.#s(o),{signal:t})}disconnect(){this.#n?.abort(),this.#n=null}sync(){let{open:t}=this.#t.state();t&&!this.#e.open?this.#e.showModal():!t&&this.#e.open&&this.#e.close()}#i(t){this.#t.escapeKeyDown?.(t);let e=t.defaultPrevented;t.preventDefault(),e||this.#t.change(!1)}#o(t){let e={x:t.clientX,y:t.clientY};O(this.#e.getBoundingClientRect(),e)&&(this.#t.pointerDownOutside?.(t),t.defaultPrevented||this.#t.change(!1))}#s(t){if(!this.#e.open)return;let e=[...this.#e.querySelectorAll(H)],o=C({key:t.key,shiftKey:t.shiftKey,active:e.indexOf(document.activeElement),count:e.length});o&&(t.preventDefault(),o.focus!==null&&e[o.focus].focus())}};var k="primitiv-modal",w="primitiv-modal-trigger",v="primitiv-modal-content",D="primitiv-modal-title",R="primitiv-modal-description",A="primitiv-modal-close";function p(n,t){return n.childElementCount===1?n.firstElementChild:(h(n,`<${n.localName}> needs exactly one element child (${t}) to decorate.`),null)}function K(n){let t=n.firstElementChild;return n.childElementCount===1&&t instanceof HTMLDialogElement?t:(h(n,`<${v}> needs exactly one <dialog> child to decorate.`),null)}var f=class extends L{#e=null;#t=null;#n=[];#i=[];#o=null;controller={connect:()=>this.#a(),disconnect:()=>this.#c()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#s(){return{state:()=>({open:this.open}),change:t=>this.#l(t)}}#l(t){t!==this.open&&(this.announce("primitiv-modal-change",{open:t})?this.open=t:this.#t?.sync())}#a(){this.#o=new AbortController,this.addEventListener("click",t=>this.#d(t),{signal:this.#o.signal}),this.#t?.connect()}#c(){this.#o.abort(),this.#o=null,this.#t?.disconnect(),this.#e&&i(this.#e,"open",null)}#d(t){let e=t.target;this.#n.some(o=>o.contains(e))?this.#l(!0):this.#i.some(o=>o.contains(e))&&this.#l(!1)}#u(t){t!==this.#e&&(this.#t?.disconnect(),t&&i(t,"open",null),this.#e=t,this.#t=t?new d(t,this.#s()):null,this.#t?.connect())}reconcile(){let t=this.open,e=t?"open":"closed",o=this.rootId();i(this,"data-state",e);let[r]=this.parts(v),s=r?K(r):null,[T]=this.parts(D),a=T?p(T,"a heading"):null,[x]=this.parts(R),c=x?p(x,"a <p>"):null;a&&!a.id&&(a.id=`${o}-title`),c&&!c.id&&(c.id=`${o}-description`),s&&(s.id||(s.id=`${o}-content`),i(s,"data-state",e),i(s,"aria-labelledby",a?a.id:null),i(s,"aria-describedby",c?c.id:null)),this.#n=this.#r(w);for(let u of this.#n)i(u,"aria-haspopup","dialog"),i(u,"aria-expanded",String(t)),i(u,"aria-controls",s?s.id:null);this.#i=this.#r(A),this.#u(s),this.#t?.sync()}#r(t){return this.parts(t).flatMap(e=>p(e,"a <button>")??[])}},m=class extends l{},b=class extends l{},E=class extends l{},g=class extends l{},y=class extends l{};function S(n=globalThis.customElements){M(n,[[k,f],[w,m],[v,b],[D,E],[R,g],[A,y]])}S();

package/dist/cdn/popover.js

@@ -0,0 +1 @@
+import{a as M}from"./chunks/chunk-PKW6AKXD.js";import{a as r,b as n,c as x,d as L,f as H}from"./chunks/chunk-QVNDDONZ.js";function C(o){return o==="Escape"?{open:!1}:null}function w({open:o,nativeLightDismiss:e,inTrigger:t,inPopover:i}){return o&&!e&&!t&&!i}var p=class{#o;#e;#t=null;#s=!1;constructor(e,t){this.#o=e,this.#e=t}connect(){if(this.#t)return;this.#t=new AbortController;let{signal:e}=this.#t;this.#o.addEventListener("toggle",t=>this.#i(t),{signal:e}),this.#o.addEventListener("keydown",t=>this.#n(t),{signal:e}),document.addEventListener("click",t=>this.#r(t),{signal:e})}disconnect(){this.#t?.abort(),this.#t=null,this.#s=!1}sync(){let{open:e}=this.#e.state();if(e&&!this.#s){this.#s=!0;let t=this.#e.source?.();t?this.#o.showPopover({source:t}):this.#o.showPopover(),(this.#o.querySelector(M)??this.#o).focus()}else if(!e&&this.#s){this.#s=!1;try{this.#o.hidePopover()}catch{}}}#i(e){e.newState==="closed"&&(this.#s=!1,this.#e.change(!1))}#n(e){e.defaultPrevented||!C(e.key)||(e.preventDefault(),this.#e.change(!1),this.#e.trigger()?.focus())}#r(e){let t=e.target;w({open:this.#e.state().open,nativeLightDismiss:"popover"in HTMLElement.prototype,inTrigger:this.#e.trigger()?.contains(t)??!1,inPopover:t.closest("[popover]")!==null})&&this.#e.change(!1)}};var D="primitiv-popover",P="primitiv-popover-trigger",O="primitiv-popover-anchor",A="primitiv-popover-content",R="primitiv-popover-title",S="primitiv-popover-description",k="primitiv-popover-close";function c(o,e){return o.childElementCount===1?o.firstElementChild:(x(o,`<${o.localName}> needs exactly one element child (${e}) to decorate.`),null)}var h=class extends H{#o=null;#e=null;#t=null;#s=null;#i=[];#n=null;controller={connect:()=>this.#a(),disconnect:()=>this.#c()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e)}#r(){return{state:()=>({open:this.open}),change:e=>this.#l(e),trigger:()=>this.#t,source:()=>this.#s??this.#t}}#l(e){e!==this.open&&(this.announce("primitiv-popover-change",{open:e})?this.open=e:queueMicrotask(()=>this.#e?.sync()))}#a(){this.#n=new AbortController,this.addEventListener("click",e=>this.#p(e),{signal:this.#n.signal}),this.#e?.connect()}#c(){this.#n.abort(),this.#n=null,this.#e?.disconnect()}#p(e){let t=e.target;this.#t?.contains(t)?this.#l(!this.open):this.#i.some(i=>i.contains(t))&&this.#l(!1)}#h(e){e!==this.#o&&(this.#e?.disconnect(),this.#o=e,this.#e=e?new p(e,this.#r()):null,this.#e?.connect())}reconcile(){let e=this.open,t=e?"open":"closed",i=this.rootId();n(this,"data-state",t);let[s=null]=this.parts(A),[E]=this.parts(P),[b]=this.parts(O),[y]=this.parts(R),[T]=this.parts(S);this.#t=E?c(E,"a <button>"):null,this.#s=b?c(b,"the element to anchor to"):null;let l=y?c(y,"a heading"):null,a=T?c(T,"a <p>"):null;l&&!l.id&&(l.id=`${i}-title`),a&&!a.id&&(a.id=`${i}-description`),s&&(s.id||(s.id=`${i}-content`),n(s,"role","dialog"),s.hasAttribute("popover")||s.setAttribute("popover","auto"),n(s,"tabindex","-1"),n(s,"data-state",t),n(s,"aria-labelledby",l?l.id:null),n(s,"aria-describedby",a?a.id:null)),this.#t&&(n(this.#t,"aria-haspopup","dialog"),n(this.#t,"aria-expanded",String(e)),n(this.#t,"aria-controls",s?s.id:null)),this.#i=this.parts(k).flatMap(N=>c(N,"a <button>")??[]),this.#h(s),this.#e?.sync()}},d=class extends r{},u=class extends r{},v=class extends r{},g=class extends r{},f=class extends r{},m=class extends r{};function I(o=globalThis.customElements){L(o,[[D,h],[P,d],[O,u],[A,v],[R,g],[S,f],[k,m]])}I();

package/dist/custom-elements.json

@@ -886,6 +886,385 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/popover/elements.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<primitiv-popover>` — the state owner of a non-modal popover: a trigger\nthat opens a floating panel, built on the native Popover API. The browser\nputs the panel in the top layer and light-dismisses it; the element adds the\nrest of the WAI-ARIA non-modal dialog pattern — focus moves into the panel\nas it opens, Escape closes it and hands focus back to the trigger, and the\ntrigger's `aria-expanded` follows it.\n\nThe panel is shown with its trigger (or the anchor) as its source, which\nmakes that element the panel's implicit anchor, so CSS anchor positioning\n(`position-area`) places it with no `anchor-name` to wire.\n\nThe root finds its own parts, so a popover nested in a panel keeps its own,\nand reconciles their ARIA from its reflected state whenever a part arrives,\nleaves, or changes an attribute the root reads (the lifecycle is\n`PrimitivRootElement`'s).",
+          "name": "PrimitivPopoverElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#content",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null",
+              "description": "The panel the root currently decorates, and the controller over it."
+            },
+            {
+              "kind": "field",
+              "name": "#popover",
+              "privacy": "private",
+              "type": {
+                "text": "PopoverController | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#trigger",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null",
+              "description": "The decorated trigger and close buttons, and the anchor, as of the last reconcile."
+            },
+            {
+              "kind": "field",
+              "name": "#anchor",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#closers",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "#listening",
+              "privacy": "private",
+              "type": {
+                "text": "AbortController | null"
+              },
+              "default": "null",
+              "description": "The root's own click listener, while connected."
+            },
+            {
+              "kind": "field",
+              "name": "controller",
+              "type": {
+                "text": "{ connect(): void; disconnect(): void }"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "{ connect: (): void => this.#connect(), disconnect: (): void => this.#disconnect(), }"
+            },
+            {
+              "kind": "field",
+              "name": "reconcileOn",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "[\"open\"]"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the panel is open, reflected as the boolean `open` attribute."
+            },
+            {
+              "kind": "method",
+              "name": "#host",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "PopoverControllerHost"
+                }
+              },
+              "description": "The controller's view of this element: state lives in the reflected attribute."
+            },
+            {
+              "kind": "method",
+              "name": "#change",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "A change the user asked for: announced first, so a listener can veto it."
+            },
+            {
+              "kind": "method",
+              "name": "#connect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#disconnect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#click",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#use",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "content",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ],
+              "description": "Decorate `content` from now on: the controller follows it. Only a\nreconcile calls this, and a root reconciles only while connected, so the\nnew controller listens at once."
+            },
+            {
+              "kind": "method",
+              "name": "reconcile",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ open: boolean }>"
+              },
+              "description": "Bubbles, cancelable, fired before a user-driven change is applied — a trigger or close click, Escape, or a light dismiss — with the open state afterwards. Call `preventDefault()` to veto it.",
+              "name": "primitiv-popover-change"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the panel is open. Reflected: it changes as the user opens and dismisses it, so a server re-render or a history snapshot sees the live state. Set it (or the `open` property) to open or close the panel from script.",
+              "name": "open"
+            }
+          ],
+          "superclass": {
+            "name": "PrimitivRootElement",
+            "module": "/src/internal/RootElement.ts"
+          },
+          "tagName": "primitiv-popover",
+          "customElement": true,
+          "summary": "The state owner of a non-modal popover on the native Popover API."
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-popover-trigger>` — an interactive part. It decorates exactly one\nchild the consumer writes, a `<button>`, which toggles the panel and receives\n`aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls`, so the\nrendered DOM matches React's (RFC 0033 D24).",
+          "name": "PrimitivPopoverTriggerElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-popover-trigger",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-popover-anchor>` — optional. It decorates exactly one element the\nconsumer writes, which the panel is anchored to in place of the trigger: a\nfield, say, whose trigger is an icon inside it.",
+          "name": "PrimitivPopoverAnchorElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-popover-anchor",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-popover-content>` — the panel. Structural: the root gives it an\nid, `role=\"dialog\"`, `popover=\"auto\"` (write it in your markup too, so the\npanel is hidden before the script loads), `tabindex=\"-1\"`, `data-state`, and\n`aria-labelledby` / `aria-describedby` pointing at the title and description.",
+          "name": "PrimitivPopoverContentElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-popover-content",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-popover-title>` — decorates exactly one heading the consumer\nwrites, whose id becomes the panel's `aria-labelledby`.",
+          "name": "PrimitivPopoverTitleElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-popover-title",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-popover-description>` — decorates exactly one element the\nconsumer writes (a `<p>`, usually), whose id becomes the panel's\n`aria-describedby`.",
+          "name": "PrimitivPopoverDescriptionElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-popover-description",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-popover-close>` — an interactive part. It decorates exactly one\n`<button>` the consumer writes, which closes the panel. A popover may have\nseveral.",
+          "name": "PrimitivPopoverCloseElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-popover-close",
+          "customElement": true
+        },
+        {
+          "kind": "function",
+          "name": "definePopover",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "registry",
+              "default": "globalThis.customElements",
+              "type": {
+                "text": "ElementRegistry | undefined"
+              }
+            }
+          ],
+          "description": "Define the seven Popover elements on `registry` (the global `customElements`\nby default). Safe to call more than once, and a no-op where there is no\nregistry (a server render)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ElementRegistry",
+          "declaration": {
+            "name": "ElementRegistry",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivPopoverElement",
+          "declaration": {
+            "name": "PrimitivPopoverElement",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivPopoverTriggerElement",
+          "declaration": {
+            "name": "PrimitivPopoverTriggerElement",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivPopoverAnchorElement",
+          "declaration": {
+            "name": "PrimitivPopoverAnchorElement",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivPopoverContentElement",
+          "declaration": {
+            "name": "PrimitivPopoverContentElement",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivPopoverTitleElement",
+          "declaration": {
+            "name": "PrimitivPopoverTitleElement",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivPopoverDescriptionElement",
+          "declaration": {
+            "name": "PrimitivPopoverDescriptionElement",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivPopoverCloseElement",
+          "declaration": {
+            "name": "PrimitivPopoverCloseElement",
+            "module": "src/popover/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "definePopover",
+          "declaration": {
+            "name": "definePopover",
+            "module": "src/popover/elements.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tabs/elements.ts",

package/dist/define/index.d.ts

@@ -5,4 +5,5 @@
 import "./accordion.js";
 import "./collapsible.js";
 import "./modal.js";
+import "./popover.js";
 import "./tabs.js";

package/dist/define/index.js

@@ -5,4 +5,5 @@
 import "./accordion.js";
 import "./collapsible.js";
 import "./modal.js";
+import "./popover.js";
 import "./tabs.js";

package/dist/define/popover.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/define/popover.js

@@ -0,0 +1,11 @@
+/**
+ * Side-effect entry: importing this module defines the seven Popover elements
+ * (`<primitiv-popover>`, `-trigger`, `-anchor`, `-content`, `-title`,
+ * `-description`, `-close`) on the global `customElements` registry.
+ *
+ * ```html
+ * <script type="module">import "@primitiv-ui/web/define/popover";</script>
+ * ```
+ */
+import { definePopover } from "../popover/elements.js";
+definePopover();

package/dist/frameworks/events.d.ts

@@ -19,3 +19,7 @@ export type PrimitivCollapsibleChangeEvent = CustomEvent<{
 export type PrimitivModalChangeEvent = CustomEvent<{
     open: boolean;
 }>;
+/** The `primitiv-popover-change` event: bubbles, cancelable, fired before the change applies, with the open state afterwards. */
+export type PrimitivPopoverChangeEvent = CustomEvent<{
+    open: boolean;
+}>;

package/dist/frameworks/react.d.ts

@@ -21,13 +21,14 @@ import type { DetailedHTMLProps, HTMLAttributes } from "react";
 import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
 import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "../collapsible/elements.js";
 import type { PrimitivModalCloseElement, PrimitivModalContentElement, PrimitivModalDescriptionElement, PrimitivModalElement, PrimitivModalTitleElement, PrimitivModalTriggerElement } from "../modal/elements.js";
+import type { PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement } from "../popover/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
-import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
 /** React's own props for an element, plus `class`, which React 19 passes to custom elements. */
 type ElementProps<E extends HTMLElement> = DetailedHTMLProps<HTMLAttributes<E>, E> & {
     class?: string;
 };
-export type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivTabsChangeEvent, };
+export type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, };
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
@@ -69,6 +70,18 @@ declare module "react" {
             "primitiv-modal-title": ElementProps<PrimitivModalTitleElement>;
             "primitiv-modal-description": ElementProps<PrimitivModalDescriptionElement>;
             "primitiv-modal-close": ElementProps<PrimitivModalCloseElement>;
+            "primitiv-popover": ElementProps<PrimitivPopoverElement> & {
+                open?: boolean;
+                "onprimitiv-popover-change"?: (event: PrimitivPopoverChangeEvent) => void;
+            };
+            "primitiv-popover-trigger": ElementProps<PrimitivPopoverTriggerElement>;
+            "primitiv-popover-anchor": ElementProps<PrimitivPopoverAnchorElement>;
+            "primitiv-popover-title": ElementProps<PrimitivPopoverTitleElement>;
+            "primitiv-popover-description": ElementProps<PrimitivPopoverDescriptionElement>;
+            "primitiv-popover-close": ElementProps<PrimitivPopoverCloseElement>;
+            "primitiv-popover-content": ElementProps<PrimitivPopoverContentElement> & {
+                popover?: "auto" | "manual" | "";
+            };
             "primitiv-tabs": ElementProps<PrimitivTabsElement> & {
                 value?: string;
                 orientation?: "horizontal" | "vertical";

package/dist/frameworks/svelte.d.ts

@@ -20,8 +20,9 @@ import type { HTMLAttributes } from "svelte/elements";
 import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
 import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "../collapsible/elements.js";
 import type { PrimitivModalCloseElement, PrimitivModalContentElement, PrimitivModalDescriptionElement, PrimitivModalElement, PrimitivModalTitleElement, PrimitivModalTriggerElement } from "../modal/elements.js";
+import type { PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement } from "../popover/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
-import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
 /** Svelte's own attributes and events for an element. */
 type Attributes<E extends HTMLElement> = HTMLAttributes<E>;
 declare module "svelte/elements" {
@@ -64,6 +65,16 @@ declare module "svelte/elements" {
         "primitiv-modal-title": Attributes<PrimitivModalTitleElement>;
         "primitiv-modal-description": Attributes<PrimitivModalDescriptionElement>;
         "primitiv-modal-close": Attributes<PrimitivModalCloseElement>;
+        "primitiv-popover": Attributes<PrimitivPopoverElement> & {
+            open?: boolean;
+            "onprimitiv-popover-change"?: (event: PrimitivPopoverChangeEvent) => void;
+        };
+        "primitiv-popover-trigger": Attributes<PrimitivPopoverTriggerElement>;
+        "primitiv-popover-anchor": Attributes<PrimitivPopoverAnchorElement>;
+        "primitiv-popover-content": Attributes<PrimitivPopoverContentElement>;
+        "primitiv-popover-title": Attributes<PrimitivPopoverTitleElement>;
+        "primitiv-popover-description": Attributes<PrimitivPopoverDescriptionElement>;
+        "primitiv-popover-close": Attributes<PrimitivPopoverCloseElement>;
         "primitiv-tabs": Attributes<PrimitivTabsElement> & {
             value?: string;
             orientation?: "horizontal" | "vertical";

package/dist/frameworks/vue.d.ts

@@ -19,7 +19,7 @@
  * JSR does not allow a published module to do.
  */
 import type { DefineComponent, EmitsOptions } from "vue";
-import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
 /** A tag as Vue's template checker sees it: its props, and the events it emits. */
 type Tag<Props, Events extends EmitsOptions = Record<never, never>> = DefineComponent<Props, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Events>;
 declare module "vue" {
@@ -67,6 +67,17 @@ declare module "vue" {
         "primitiv-modal-title": Tag<Record<never, never>>;
         "primitiv-modal-description": Tag<Record<never, never>>;
         "primitiv-modal-close": Tag<Record<never, never>>;
+        "primitiv-popover": Tag<{
+            open?: boolean | "";
+        }, {
+            "primitiv-popover-change": (event: PrimitivPopoverChangeEvent) => void;
+        }>;
+        "primitiv-popover-trigger": Tag<Record<never, never>>;
+        "primitiv-popover-anchor": Tag<Record<never, never>>;
+        "primitiv-popover-content": Tag<Record<never, never>>;
+        "primitiv-popover-title": Tag<Record<never, never>>;
+        "primitiv-popover-description": Tag<Record<never, never>>;
+        "primitiv-popover-close": Tag<Record<never, never>>;
         "primitiv-tabs": Tag<{
             value?: string;
             orientation?: "horizontal" | "vertical";

package/dist/index.d.ts

@@ -6,4 +6,5 @@
 export * from "./accordion/index.js";
 export * from "./collapsible/index.js";
 export * from "./modal/index.js";
+export * from "./popover/index.js";
 export * from "./tabs/index.js";

package/dist/index.js

@@ -6,4 +6,5 @@
 export * from "./accordion/index.js";
 export * from "./collapsible/index.js";
 export * from "./modal/index.js";
+export * from "./popover/index.js";
 export * from "./tabs/index.js";