@primitiv-ui/web 0.1.55 → 0.1.57

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, Modal and Popover so far. See
+> **Status: published.** Tabs, Accordion, Collapsible, Modal, Popover, Tooltip and Dropdown so far. See
 > [RFC 0033](../../docs/rfcs/0033-web-components.md) for the design.
 
 ## Components
@@ -18,6 +18,8 @@ React, Vue, Angular or any other framework.
 | 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 |
+| Tooltip | `primitiv-tooltip`, `-provider`, `-trigger`, `-content`, `-arrow` | `primitiv-tooltip-change` | 0.1.56 |
+| Dropdown | `primitiv-dropdown`, `-trigger`, `-content`, `-item`, `-checkbox-item`, `-radio-group`, `-radio-item`, `-item-indicator`, `-group`, `-label`, `-separator`, `-sub`, `-sub-trigger`, `-sub-content` | `primitiv-dropdown-change`, `-sub-change`, `-select`, `-checked-change`, `-value-change` | 0.1.57 |
 
 ## Use it
 
@@ -50,9 +52,10 @@ 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`, `/popover`) exports the classes and `defineTabs(registry?)` /
+`/modal`, `/popover`, `/tooltip`, `/dropdown`) exports the classes and `defineTabs(registry?)` /
 `defineAccordion(registry?)` / `defineCollapsible(registry?)` /
-`defineModal(registry?)` / `definePopover(registry?)` with **no side effects**.
+`defineModal(registry?)` / `definePopover(registry?)` / `defineTooltip(registry?)` /
+`defineDropdown(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.
@@ -183,6 +186,70 @@ on a panel as it becomes active, for lazy loading.
   **Listen with `primitiv-popover-change`** (bubbles, cancelable, `detail: {
   open }`), fired before every user-driven change, a light dismiss included.
 
+### Tooltip
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/tooltip.js"></script>
+
+<primitiv-tooltip>
+  <primitiv-tooltip-trigger><button type="button">Save</button></primitiv-tooltip-trigger>
+  <primitiv-tooltip-content popover="manual">
+    Saves your work
+    <primitiv-tooltip-arrow></primitiv-tooltip-arrow>
+  </primitiv-tooltip-content>
+</primitiv-tooltip>
+```
+
+- **It opens on hover after `delay-duration` (700 ms) and on focus at once**,
+  and closes when the pointer leaves (after a short grace period, so the pointer
+  can reach the bubble — `disable-hoverable-content` turns that off), on blur,
+  on Escape and on a press outside. The element gives the bubble
+  `role="tooltip"` and the trigger's button `aria-describedby`.
+- **It is a native `popover="manual"`** in the top layer, shown with the
+  trigger as its source, so CSS anchor positioning places it with no
+  `anchor-name` / `position-anchor` pair. Write `popover="manual"` yourself so
+  the bubble is hidden before the script loads.
+- **Moving from one trigger to the next opens each next tooltip at once** (the
+  skip delay, 300 ms). Tooltips inside a `<primitiv-tooltip-provider>` share its
+  `delay-duration` and `skip-delay-duration`; the rest share a document-wide
+  window.
+- **`open` on the root is the state**; the `open` property reads and sets it.
+  **Listen with `primitiv-tooltip-change`** (bubbles, cancelable, `detail: {
+  open }`), fired before every user-driven change.
+
+### Dropdown
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/dropdown.js"></script>
+
+<primitiv-dropdown>
+  <primitiv-dropdown-trigger><button type="button">Options</button></primitiv-dropdown-trigger>
+  <primitiv-dropdown-content popover="auto">
+    <primitiv-dropdown-item><li>Copy</li></primitiv-dropdown-item>
+    <primitiv-dropdown-checkbox-item checked><li>Show grid</li></primitiv-dropdown-checkbox-item>
+    <primitiv-dropdown-sub>
+      <primitiv-dropdown-sub-trigger><li>Share</li></primitiv-dropdown-sub-trigger>
+      <primitiv-dropdown-sub-content popover="auto">
+        <primitiv-dropdown-item><li>Email</li></primitiv-dropdown-item>
+      </primitiv-dropdown-sub-content>
+    </primitiv-dropdown-sub>
+  </primitiv-dropdown-content>
+</primitiv-dropdown>
+```
+
+- **A menu button over a native `popover="auto"`**, anchored to its trigger
+  with no wiring. It opens focused on the first item; the arrows, Home and End
+  move, Enter and Space choose, typing finds an item, and Escape, a press
+  outside or a chosen item closes it with focus back on the trigger.
+- **Each row wraps the element you write** (an `<li>`, or a link), which gets
+  its menu role. Close every `<li>`: the HTML parser ends an open `<li>` at the
+  next one, custom elements or not. `disabled` on a row skips it.
+- **State is attributes**: `open` on the root and on each
+  `<primitiv-dropdown-sub>`, `checked` on a checkbox item (`indeterminate` for
+  mixed), `value` on a radio group. Each change fires a cancelable event first;
+  **listen for `primitiv-dropdown-select`** on an item to act on it, and cancel
+  it to keep the menu open.
+
 **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-P2K4DPA4.js

@@ -0,0 +1 @@
+function f(t,e){let o={top:e.top-t.bottom,bottom:t.top-e.bottom,left:e.left-t.right,right:t.left-e.right},m=Object.keys(o).reduce((n,b)=>o[b]>o[n]?b:n),r=m==="top"||m==="bottom",[i,c,g]=r?[t.left,t.right,(e.left+e.right)/2]:[t.top,t.bottom,(e.top+e.bottom)/2],l=(g-i)/(c-i),s=l<1/3?r?"left":"top":l>2/3?r?"right":"bottom":"center";return{side:m,align:s}}export{f as a};

package/dist/cdn/dropdown.js

@@ -0,0 +1 @@
+import{a as c,b as i,c as $,d as P,f as b}from"./chunks/chunk-QVNDDONZ.js";var p='[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])';function B({key:n,active:e,count:t}){if(t===0)return null;switch(n){case"ArrowDown":return{focus:(e+1)%t};case"ArrowUp":return{focus:e<=0?t-1:e-1};case"Home":return{focus:0};case"End":return{focus:t-1};case"Enter":case" ":return e<0?null:{activate:e};case"Escape":return{open:!1};default:return null}}var G=500;function Y({query:n,key:e,labels:t,active:o}){if(e.length!==1||e===" ")return null;let r=(n+e).toLowerCase(),s=[...r].every(a=>a===r[0])?r[0]:r,l=Math.max(o,0)+(s.length===1?1:0);for(let a=0;a<t.length;a++){let h=(l+a)%t.length;if(t[h].trim().toLowerCase().startsWith(s))return{query:r,focus:h}}return{query:r,focus:null}}var m=class{#o;#t;#e=null;#n=!1;#i="";#s;constructor(e,t){this.#o=e,this.#t=t}connect(){if(this.#e)return;this.#e=new AbortController;let{signal:e}=this.#e;this.#o.addEventListener("toggle",t=>this.#a(t),{signal:e}),this.#o.addEventListener("keydown",t=>this.#l(t),{signal:e}),document.addEventListener("click",t=>this.#r(t),{signal:e})}disconnect(){this.#e?.abort(),this.#e=null,this.#n=!1}sync(){let{open:e}=this.#t.state();if(e&&!this.#n){this.#n=!0;let t=this.#t.source?.();t?this.#o.showPopover({source:t}):this.#o.showPopover(),this.#o.contains(document.activeElement)||this.#o.querySelector(p)?.focus()}else if(!e&&this.#n){this.#n=!1;try{this.#o.hidePopover()}catch{}}}#a(e){e.newState==="closed"&&(this.#n=!1,this.#t.change(!1))}#l(e){let t=document.activeElement.closest("[popover]")??this.#o,o=[...t.querySelectorAll(p)].filter(l=>l.closest("[popover]")===t),r=o.indexOf(document.activeElement),u=B({key:e.key,active:r,count:o.length});if(u){e.preventDefault(),"focus"in u?o[u.focus].focus():"activate"in u?o[u.activate].click():(this.#t.change(!1),this.#t.trigger()?.focus());return}let s=Y({query:this.#i,key:e.key,labels:o.map(l=>l.textContent),active:r});s&&(this.#i=s.query,clearTimeout(this.#s),this.#s=setTimeout(()=>this.#i="",G),s.focus!==null&&(e.preventDefault(),o[s.focus].focus()))}#r(e){if(!this.#t.state().open)return;let t=e.target;this.#t.trigger()?.contains(t)||t.closest("[popover]")||this.#t.change(!1)}};var g=class{#o;#t;#e=null;#n=!1;constructor(e,t){this.#o=e,this.#t=t}connect(){if(this.#e)return;this.#e=new AbortController;let{signal:e}=this.#e;this.#o.addEventListener("toggle",t=>this.#i(t),{signal:e}),this.#o.addEventListener("keydown",t=>this.#s(t),{signal:e})}disconnect(){this.#e?.abort(),this.#e=null,this.#n=!1}sync(){let{open:e}=this.#t.state();if(e&&!this.#n){this.#n=!0;let t=this.#t.source?.();t?this.#o.showPopover({source:t}):this.#o.showPopover(),this.#o.querySelector(p)?.focus()}else if(!e&&this.#n){this.#n=!1;try{this.#o.hidePopover()}catch{}}}#i(e){e.newState==="closed"&&(this.#n=!1,this.#t.change(!1))}#s(e){e.key===this.#t.closeKey()&&(e.preventDefault(),e.stopPropagation(),this.#t.change(!1),this.#t.trigger()?.focus())}};var X="primitiv-dropdown",j="primitiv-dropdown-trigger",z="primitiv-dropdown-content",F="primitiv-dropdown-item",d="primitiv-dropdown-checkbox-item",E="primitiv-dropdown-radio-group",f="primitiv-dropdown-radio-item",J="primitiv-dropdown-item-indicator",w="primitiv-dropdown-group",M="primitiv-dropdown-label",Q="primitiv-dropdown-separator",te="primitiv-dropdown-sub",V="primitiv-dropdown-sub-trigger",Z="primitiv-dropdown-sub-content",W=`${F},${d},${f}`;function x(n,e){return n.childElementCount===1?n.firstElementChild:($(n,`<${n.localName}> needs exactly one element child (${e}) to decorate.`),null)}function v(n,e,t){return n.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:t}))}function y(n){let e=n.getAttribute("checked");return e==="indeterminate"?e:e!==null}function T(n){return n.closest(E)?.getAttribute("value")===n.getAttribute("value")}var L=class extends b{#o=null;#t=null;#e=null;#n=null;controller={connect:()=>this.#a(),disconnect:()=>this.#l()};reconcileOn=["open","disabled","checked","value"];get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e)}#i(){return{state:()=>({open:this.open}),change:e=>this.#s(e),trigger:()=>this.#e,source:()=>this.#e}}#s(e){e!==this.open&&(this.announce("primitiv-dropdown-change",{open:e})?this.open=e:queueMicrotask(()=>this.#t?.sync()))}#a(){this.#n=new AbortController;let e={signal:this.#n.signal};this.addEventListener("click",t=>this.#h(t),e),this.addEventListener("pointerover",t=>this.#u(t,!0),e),this.addEventListener("pointerout",t=>this.#u(t,!1),e),this.#t?.connect()}#l(){this.#n.abort(),this.#n=null,this.#t?.disconnect()}#r(e){let t=e?.closest(W)??null;return t?.closest(X)===this?t:null}#u(e,t){let o=this.#r(e.target);if(!o||o===this.#r(e.relatedTarget))return;let r=o.firstElementChild;i(r,"data-highlighted",t?"":null)}#h(e){let t=e.target;if(this.#e?.contains(t)){this.#s(!this.open);return}let o=this.#r(t);if(!(!o||o.hasAttribute("disabled"))){if(o.localName===d){let r=y(o)!==!0;v(o,"primitiv-dropdown-checked-change",{checked:r})&&i(o,"checked",r?"":null)}else if(o.localName===f&&!T(o)){let r=o.closest(E),u=o.getAttribute("value");v(r,"primitiv-dropdown-value-change",{value:u})&&r.setAttribute("value",u)}v(o,"primitiv-dropdown-select",null)&&(this.#s(!1),this.#e?.focus())}}#c(e){e!==this.#o&&(this.#t?.disconnect(),this.#o=e,this.#t=e?new m(e,this.#i()):null,this.#t?.connect())}reconcile(){let e=this.open,t=this.rootId(),[o=null]=this.parts(z),[r]=this.parts(j);this.#e=r?x(r,"a <button>"):null,o&&(o.id||(o.id=`${t}-content`),i(o,"role","menu"),o.hasAttribute("popover")||o.setAttribute("popover","auto")),this.#e&&(i(this.#e,"aria-haspopup","menu"),i(this.#e,"aria-expanded",String(e)),i(this.#e,"aria-controls",o?o.id:null));for(let s of this.parts(W)){let l=x(s,"an <li>");if(!l)continue;let a=s.localName===d,h=s.localName===f,U=a?y(s):h&&T(s);i(l,"role",a?"menuitemcheckbox":h?"menuitemradio":"menuitem"),i(l,"tabindex","-1"),i(l,"aria-disabled",s.hasAttribute("disabled")?"true":null),i(l,"aria-checked",a||h?U==="indeterminate"?"mixed":String(U):null)}for(let s of this.parts(J)){let l=s.closest(`${d},${f}`),a=l?.localName===d?y(l):l?T(l):!1;i(s,"data-state",a==="indeterminate"?a:a?"checked":"unchecked"),i(s,"hidden",a||s.hasAttribute("force-mount")?null:"")}let u=0;for(let s of this.parts(M))s.id||(s.id=`${t}-label-${++u}`);for(let s of this.parts(w)){let l=[...s.querySelectorAll(M)].find(a=>a.closest(w)===s);i(s,"role","group"),i(s,"aria-labelledby",l?l.id:null)}for(let s of this.parts(E))i(s,"role","group");for(let s of this.parts(Q))i(s,"role","separator");this.#c(o),this.#t?.sync()}},H=class extends b{#o=null;#t=null;#e=null;#n=null;#i=!1;#s=null;controller={connect:()=>this.#u(),disconnect:()=>this.#h()};reconcileOn=["open","disabled"];get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e)}#a(){return{state:()=>({open:this.open}),change:e=>this.#l(e),trigger:()=>this.#e,source:()=>this.#e,closeKey:()=>this.direction()==="rtl"?"ArrowRight":"ArrowLeft"}}#l(e){e!==this.open&&(this.announce("primitiv-dropdown-sub-change",{open:e})?this.open=e:queueMicrotask(()=>this.#t?.sync()))}#r(){return this.#n.hasAttribute("disabled")}#u(){this.#s=new AbortController;let e={signal:this.#s.signal};this.addEventListener("click",t=>this.#c(t)&&this.#d(),e),this.addEventListener("keydown",t=>this.#f(t),e),this.addEventListener("pointerover",t=>this.#p(t,!0),e),this.addEventListener("pointerout",t=>this.#p(t,!1),e),document.addEventListener("pointerover",t=>this.#m(t),e),this.#t?.connect()}#h(){this.#s.abort(),this.#s=null,this.#t?.disconnect()}#c(e){return this.#e?.contains(e.target)??!1}#d(){this.#r()||this.#l(!0)}#f(e){!this.#c(e)||this.#r()||e.key===(this.direction()==="rtl"?"ArrowLeft":"ArrowRight")&&(e.preventDefault(),e.stopPropagation(),this.#l(!0))}#p(e,t){!this.#c(e)||this.#e.contains(e.relatedTarget)||(this.#i=t,this.reconcile(),t&&this.#d())}#m(e){if(!this.open||this.contains(e.target))return;let t=e.target.closest('[role^="menuitem"]');t&&t.closest('[role="menu"]')===this.parentElement.closest('[role="menu"]')&&this.#l(!1)}#g(e){e!==this.#o&&(this.#t?.disconnect(),this.#o=e,this.#t=e?new g(e,this.#a()):null,this.#t?.connect())}reconcile(){let e=this.open,[t=null]=this.parts(Z),[o=null]=this.parts(V);this.#n=o,this.#e=o?x(o,"an <li>"):null,t&&(t.id||(t.id=`${this.rootId()}-content`),i(t,"role","menu"),t.hasAttribute("popover")||t.setAttribute("popover","auto")),this.#e&&(i(this.#e,"role","menuitem"),i(this.#e,"tabindex","-1"),i(this.#e,"aria-haspopup","menu"),i(this.#e,"aria-expanded",String(e)),i(this.#e,"aria-controls",t?t.id:null),i(this.#e,"aria-disabled",this.#r()?"true":null),i(this.#e,"data-highlighted",this.#i||e?"":null)),this.#g(t),this.#t?.sync()}},A=class extends c{},C=class extends c{},k=class extends c{},S=class extends c{},O=class extends c{},R=class extends c{},N=class extends c{},_=class extends c{},q=class extends c{},D=class extends c{},K=class extends c{},I=class extends c{};function ee(n=globalThis.customElements){P(n,[[X,L],[j,A],[z,C],[F,k],[d,S],[E,O],[f,R],[J,N],[w,_],[M,q],[Q,D],[te,H],[V,K],[Z,I]])}ee();

package/dist/cdn/popover.js

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

package/dist/cdn/tooltip.js

@@ -0,0 +1 @@
+import{a as T}from"./chunks/chunk-P2K4DPA4.js";import{a as l,b as s,c as y,d as E,f as b}from"./chunks/chunk-QVNDDONZ.js";function w({groupOpen:n,delay:t}){return n?0:t}var p=class{#t;#o=null;#e=null;#n=t=>this.#a(t);#s=t=>this.#h(t);#i=null;constructor(t){this.#t=t}openNow(){this.#p(),this.#t.change(!0),this.#t.tooltipGroup().opened()}hoverStart(){let t=w({groupOpen:this.#t.tooltipGroup().isOpen(),delay:this.#t.delay()});if(t===0){this.openNow();return}this.#o=setTimeout(()=>{this.openNow(),this.#o=null},t)}closeNow(){this.holdOpen(),this.#t.change(!1),this.#t.tooltipGroup().closed()}hoverEnd(){this.#p(),this.#e=setTimeout(()=>{this.#t.change(!1),this.#t.tooltipGroup().closed(),this.#e=null},100)}holdOpen(){this.#e!==null&&(clearTimeout(this.#e),this.#e=null)}sync(){let{open:t}=this.#t.state();t?(document.addEventListener("keydown",this.#n),document.addEventListener("pointerdown",this.#s),this.#i||this.#d()):this.#r()}#d(){this.#i=new AbortController;let t={capture:!0,passive:!0,signal:this.#i.signal};window.addEventListener("scroll",()=>this.#l(),t),window.addEventListener("resize",()=>this.#l(),t),this.#l()}#l(){let t=this.#t.content(),e=this.#t.anchor?.();if(!t||!e)return;let{side:i,align:o}=T(t.getBoundingClientRect(),e.getBoundingClientRect());s(t,"data-side",i),s(t,"data-align",o)}#r(){document.removeEventListener("keydown",this.#n),document.removeEventListener("pointerdown",this.#s),this.#i?.abort(),this.#i=null}disconnect(){this.#p(),this.holdOpen(),this.#r()}#p(){this.#o!==null&&(clearTimeout(this.#o),this.#o=null)}#a(t){t.key==="Escape"&&(this.#t.escapeKeyDown?.(t),t.defaultPrevented||this.closeNow())}#h(t){this.#t.content()?.contains(t.target)||(this.#t.pointerDownOutside?.(t),t.defaultPrevented||this.closeNow())}};var r=class{#t;#o=!1;#e=null;constructor(t){this.#t=t}isOpen(){return this.#o}opened(){this.#e!==null&&(clearTimeout(this.#e),this.#e=null),this.#o=!0}closed(){clearTimeout(this.#e??void 0),this.#e=setTimeout(()=>{this.#o=!1,this.#e=null},this.#t())}dispose(){clearTimeout(this.#e??void 0)}};var R="primitiv-tooltip",L="primitiv-tooltip-provider",f="primitiv-tooltip-trigger",O="primitiv-tooltip-content",G="primitiv-tooltip-arrow",g=700,N=300;function a(n,t,e){let i=Number(n.getAttribute(t)??Number.NaN);return Number.isNaN(i)?e:i}var A=new r(()=>N),h=class extends l{#t;get group(){return this.#t??=new r(()=>a(this,"skip-delay-duration",N))}},u=class extends b{#t=null;#o=null;#e=null;#n=null;#s=new p(this.#i());controller={connect:()=>{},disconnect:()=>this.#d()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#i(){let t=()=>this.closest(L);return{state:()=>({open:this.open}),change:e=>{e!==this.open&&this.announce("primitiv-tooltip-change",{open:e})&&(this.open=e)},delay:()=>{let e=t();return a(this,"delay-duration",e?a(e,"delay-duration",g):g)},tooltipGroup:()=>t()?.group??A,content:()=>this.#o,anchor:()=>this.#t}}#d(){this.open&&this.#i().tooltipGroup().closed(),this.#n?.abort(),this.#n=null,this.#t=null,this.#o=null,this.#e=null,this.#s.disconnect()}#l(t,e){if(t===this.#t&&e===this.#o)return;this.#n?.abort(),this.#n=new AbortController,this.#t=t,this.#o=e;let i={signal:this.#n.signal},o=this.#s;t?.addEventListener("pointerenter",()=>o.hoverStart(),i),t?.addEventListener("pointerleave",()=>this.hasAttribute("disable-hoverable-content")?o.closeNow():o.hoverEnd(),i),t?.addEventListener("focus",()=>o.openNow(),i),t?.addEventListener("blur",()=>o.closeNow(),i),e?.addEventListener("pointerenter",()=>o.holdOpen(),i),e?.addEventListener("pointerleave",()=>o.closeNow(),i)}reconcile(){let t=this.open,e=t?"open":"closed";s(this,"data-state",e);let[i]=this.parts(f),[o=null]=this.parts(O),d=i?C(i):null;o&&(o.id||(o.id=`${this.rootId()}-content`),s(o,"role","tooltip"),o.hasAttribute("popover")||o.setAttribute("popover","manual"),s(o,"data-state",e)),d&&(s(d,"aria-describedby",o?o.id:null),s(d,"data-state",e)),this.#l(d,o),this.#r(t?o:null),this.#s.sync()}#r(t){if(t===this.#e)return;if(this.#e)try{this.#e.hidePopover()}catch{}if(this.#e=t,!t)return;let e=t;this.#t?e.showPopover({source:this.#t}):e.showPopover()}};function C(n){return n.childElementCount===1?n.firstElementChild:(y(n,`<${f}> needs exactly one element child (a <button>) to decorate.`),null)}var c=class extends l{},m=class extends l{},v=class extends l{};function x(n=globalThis.customElements){E(n,[[R,u],[L,h],[f,c],[O,m],[G,v]])}x();