@primitiv-ui/web 0.1.53 → 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 and Collapsible 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
@@ -16,6 +16,8 @@ React, Vue, Angular or any other framework.
 | Tabs | `primitiv-tabs`, `-list`, `-trigger`, `-content` | `primitiv-tabs-change` | 0.1.42 |
 | 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
 
@@ -47,9 +49,10 @@ Each `dist/cdn/<component>.js` imports the code components share from
 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`)
-exports the classes and `defineTabs(registry?)` / `defineAccordion(registry?)` /
-`defineCollapsible(registry?)` with **no side effects**.
+The main entry (`@primitiv-ui/web`, `/tabs`, `/accordion`, `/collapsible`,
+`/modal`, `/popover`) exports the classes and `defineTabs(registry?)` /
+`defineAccordion(registry?)` / `defineCollapsible(registry?)` /
+`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.
@@ -118,6 +121,68 @@ on a panel as it becomes active, for lazy loading.
   open }`) and `primitiv-collapsible-show` on the panel as it opens. Render
   `hidden` on a closed panel yourself, as for Tabs.
 
+### Modal
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/modal.js"></script>
+
+<primitiv-modal>
+  <primitiv-modal-trigger><button type="button">Edit profile</button></primitiv-modal-trigger>
+  <primitiv-modal-content>
+    <dialog>
+      <primitiv-modal-title><h2>Edit profile</h2></primitiv-modal-title>
+      <primitiv-modal-description><p>Changes apply to every workspace.</p></primitiv-modal-description>
+      <primitiv-modal-close><button type="button">Done</button></primitiv-modal-close>
+    </dialog>
+  </primitiv-modal-content>
+</primitiv-modal>
+```
+
+- **It is a native `<dialog>`, opened with `showModal()`**: the browser supplies
+  the top layer, the `::backdrop` and the inert page. The element adds the
+  Tab wrap, closing on Escape and on a backdrop press, and the ARIA wiring —
+  `aria-haspopup`, `aria-expanded` and `aria-controls` on the trigger's button,
+  `aria-labelledby` / `aria-describedby` from the title's heading and the
+  description's paragraph. Focus returns to the trigger on close.
+- **`open` on the root is the state**, reflected as the user opens and dismisses
+  it; the `open` property reads and sets it, and setting it is not announced.
+  Leave `open` off the `<dialog>` itself — the root opens it modally, and
+  reopens modally one that arrives with it (a history snapshot).
+- **Several triggers and close buttons** are fine. There is no overlay element:
+  style `::backdrop`.
+- **Listen with `primitiv-modal-change`** (bubbles, cancelable, `detail: { open
+  }`), fired before every user-driven change — trigger, close, Escape, a backdrop
+  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/accordion.js

@@ -1 +1 @@
-import{a as b,e as C,f as O,i as g,j as n,k as v,l as H,m as f,n as R,o as M}from"./chunks/chunk-WVI5UEAW.js";var m=class extends M{#t;constructor(e,s){super(e),this.#t=s}#e(e){let{expanded:s,multiple:c}=this.#t.state(),r=C({disabled:this.disabled(),expanded:s,multiple:c},e);r!==null&&this.#t.change(r)}onTriggerClick(e){this.#e(e.value)}onTriggerKeydown(e,s){let{expanded:c,multiple:r,orientation:l,dir:d}=this.#t.state(),u=this.ordered(),p=u.map(([,o])=>o.value),t=O({values:p,disabled:this.disabled(),expanded:c,multiple:r,orientation:l,dir:d},e.value,s.key);t&&(s.preventDefault(),t.toggle!==null&&this.#e(t.toggle),t.focus!==null&&u[p.indexOf(t.focus)][0].focus())}};var k="primitiv-accordion",h="primitiv-accordion-item",w="primitiv-accordion-trigger",L="primitiv-accordion-content",S="primitiv-accordion-trigger-icon";function D(i){return(i??"").split(/\s+/).filter(Boolean)}function K(i){return i.childElementCount===1?i.firstElementChild:(v(i,`<${w}> needs exactly one element child (a <button>) to decorate.`),null)}var y=class extends R{#t=new Set;#e=!1;controller=new m(this,this.#i());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return D(this.getAttribute("value"))}set value(e){this.setAttribute("value",typeof e=="string"?e:e.join(" "))}#i(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#o(),dir:this.direction()}),change:e=>{this.announce("primitiv-accordion-change",{value:e})&&(this.value=e)}}}#o(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let e=new Set(this.value),s=this.rootId();n(this,"data-orientation",this.#o());let c=[];for(let r of this.parts(h)){let l=r.getAttribute("value");if(l===null){v(r,`<${h}> needs a value, which pairs it with the root's value.`);continue}let d=e.has(l),u=d?"open":"closed",[p]=f(r,w,h),[t]=f(r,L,h),o=p?K(p):null;if(o){let a=p.hasAttribute("disabled");c.push({value:l,element:o,disabled:a}),o.id||(o.id=b(s,"heading",l)),n(o,"aria-expanded",String(d)),n(o,"aria-disabled",String(a)),n(o,"data-disabled",String(a)),n(o,"data-state",u)}if(t){t.id||(t.id=b(s,"panel",l));let a=t.hasAttribute("force-mount");t.hasAttribute("role")||t.setAttribute("role","region"),n(t,"aria-labelledby",o?o.id:null),n(t,"hidden",d||a?null:""),n(t,"aria-hidden",d?null:"true"),n(t,"data-state",u),this.#e&&d&&!this.#t.has(l)&&t.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}o&&n(o,"aria-controls",t?t.id:null);for(let a of f(r,S,h))n(a,"aria-hidden","true"),n(a,"data-state",u)}this.controller.setTriggers(c),this.#t=e,this.#e=!0}},x=class extends g{},A=class extends g{},T=class extends g{},E=class extends g{};function I(i=globalThis.customElements){H(i,[[k,y],[h,x],[w,A],[L,T],[S,E]])}I();
+import{a as b,b as R,c as H}from"./chunks/chunk-HXGMU6SD.js";import{a as S}from"./chunks/chunk-EDLRMP2K.js";import{a as h,b as r,c as v,d as O,e as f,f as C}from"./chunks/chunk-QVNDDONZ.js";function K(e,t){return e.disabled.has(t)?null:e.expanded.includes(t)?e.expanded.filter(n=>n!==t):e.multiple?[...e.expanded,t]:[t]}function M(e,t,n){let d=R({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[n];if(d==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let l=e.values.filter(a=>!e.disabled.has(a)),s=H({action:d,navigable:l,currentKey:t});return s&&{focus:s.target,toggle:null}}var m=class extends S{#t;constructor(t,n){super(t),this.#t=n}#e(t){let{expanded:n,multiple:d}=this.#t.state(),l=K({disabled:this.disabled(),expanded:n,multiple:d},t);l!==null&&this.#t.change(l)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,n){let{expanded:d,multiple:l,orientation:s,dir:a}=this.#t.state(),u=this.ordered(),p=u.map(([,i])=>i.value),o=M({values:p,disabled:this.disabled(),expanded:d,multiple:l,orientation:s,dir:a},t.value,n.key);o&&(n.preventDefault(),o.toggle!==null&&this.#e(o.toggle),o.focus!==null&&u[p.indexOf(o.focus)][0].focus())}};var I="primitiv-accordion",g="primitiv-accordion-item",w="primitiv-accordion-trigger",L="primitiv-accordion-content",k="primitiv-accordion-trigger-icon";function z(e){return(e??"").split(/\s+/).filter(Boolean)}function N(e){return e.childElementCount===1?e.firstElementChild:(v(e,`<${w}> needs exactly one element child (a <button>) to decorate.`),null)}var y=class extends C{#t=new Set;#e=!1;controller=new m(this,this.#i());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return z(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#i(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#o(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#o(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),n=this.rootId();r(this,"data-orientation",this.#o());let d=[];for(let l of this.parts(g)){let s=l.getAttribute("value");if(s===null){v(l,`<${g}> needs a value, which pairs it with the root's value.`);continue}let a=t.has(s),u=a?"open":"closed",[p]=f(l,w,g),[o]=f(l,L,g),i=p?N(p):null;if(i){let c=p.hasAttribute("disabled");d.push({value:s,element:i,disabled:c}),i.id||(i.id=b(n,"heading",s)),r(i,"aria-expanded",String(a)),r(i,"aria-disabled",String(c)),r(i,"data-disabled",String(c)),r(i,"data-state",u)}if(o){o.id||(o.id=b(n,"panel",s));let c=o.hasAttribute("force-mount");o.hasAttribute("role")||o.setAttribute("role","region"),r(o,"aria-labelledby",i?i.id:null),r(o,"hidden",a||c?null:""),r(o,"aria-hidden",a?null:"true"),r(o,"data-state",u),this.#e&&a&&!this.#t.has(s)&&o.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}i&&r(i,"aria-controls",o?o.id:null);for(let c of f(l,k,g))r(c,"aria-hidden","true"),r(c,"data-state",u)}this.controller.setTriggers(d),this.#t=t,this.#e=!0}},x=class extends h{},A=class extends h{},T=class extends h{},E=class extends h{};function D(e=globalThis.customElements){O(e,[[I,y],[g,x],[w,A],[L,T],[k,E]])}D();

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

@@ -0,0 +1 @@
+var n=class{#r;#e=new Map;#t=null;constructor(e){this.#r=e}registerTrigger(e,t,r={}){this.#e.set(t,{value:e,disabled:r.disabled??!1})}setTriggers(e){this.#e.clear();for(let{value:t,element:r,disabled:i}of e)this.registerTrigger(t,r,{disabled:i})}unregisterTrigger(e){this.#e.delete(e)}connect(){if(this.#t)return;this.#t=new AbortController;let{signal:e}=this.#t;this.#r.addEventListener("click",t=>this.#i(t,this.onTriggerClick),{signal:e}),this.#r.addEventListener("keydown",t=>this.#i(t,this.onTriggerKeydown),{signal:e})}disconnect(){this.#t?.abort(),this.#t=null}ordered(){return[...this.#e].sort(([e],[t])=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let e=new Set;for(let t of this.#e.values())t.disabled&&e.add(t.value);return e}#i(e,t){for(let[r,i]of this.#e)if(r.contains(e.target))return t.call(this,i,e)}};export{n as a};

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

@@ -0,0 +1 @@
+function c(r,e,n){return`${r}-${e}-${n}`}function l({orientation:r,dir:e,homeEnd:n=!1,activate:o=!1}){let t={};if(r==="horizontal"||r==="both"){let i=e==="rtl"?"ArrowLeft":"ArrowRight",a=e==="rtl"?"ArrowRight":"ArrowLeft";t[i]="next",t[a]="prev"}return(r==="vertical"||r==="both")&&(t.ArrowDown="next",t.ArrowUp="prev"),n&&(t.Home="first",t.End="last"),o&&(t.Enter="activate",t[" "]="activate"),t}function g({action:r,navigable:e,currentKey:n}){let o=e.length;if(o===0)return null;switch(r){case"activate":return{target:n};case"first":return{target:e[0]};case"last":return{target:e[o-1]};case void 0:return null;case"next":case"prev":{let t=e.indexOf(n);if(t===-1)return null;let i=r==="next"?1:o-1;return{target:e[(t+i)%o]}}}}export{c as a,l as b,g as c};

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/chunks/chunk-QVNDDONZ.js

@@ -0,0 +1 @@
+var i=globalThis.HTMLElement??class{};function d(e,t,n){e.getAttribute(t)!==n&&(n===null?e.removeAttribute(t):e.setAttribute(t,n))}var o=new WeakSet;function a(e,t){o.has(e)||(o.add(e),console.error(t,e))}function u(e,t){if(e)for(let[n,r]of t)e.get(n)||e.define(n,r)}function s(e,t,n){return[...e.querySelectorAll(t)].filter(r=>r.closest(n)===e)}var l=0,c=class extends i{#t;#e=new MutationObserver(()=>this.reconcile());connectedCallback(){this.controller.connect(),this.#e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[...this.reconcileOn]}),this.reconcile()}disconnectedCallback(){this.controller.disconnect(),this.#e.disconnect()}rootId(){return this.id||(this.#t??=`${this.localName}-${++l}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return s(this,t,this.localName)}announce(t,n){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}))}};export{i as a,d as b,a as c,u as d,s as e,c as f};

package/dist/cdn/collapsible.js

@@ -1 +1 @@
-import{g as y,h as T,i as d,j as i,k as x,l as C,n as E,o as v}from"./chunks/chunk-WVI5UEAW.js";var p=class extends v{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let o=y({open:this.#t.state().open,disabled:t.disabled});o!==null&&this.#t.change(o)}onTriggerKeydown(t,o){let s=T({open:this.#t.state().open,disabled:t.disabled},o.key);s&&(o.preventDefault(),this.#t.change(s.open))}};var R="primitiv-collapsible",b="primitiv-collapsible-trigger",H="primitiv-collapsible-content",w="primitiv-collapsible-trigger-icon",L="--primitiv-collapsible-collapsed-height";function O(e){return e.childElementCount===1?e.firstElementChild:(x(e,`<${b}> needs exactly one element child (a <button>) to decorate.`),null)}function M(e){return Number.isNaN(Number(e))?e:`${e}px`}function I(e,t,o){e.style.getPropertyValue(t)!==o&&(e.style.setProperty(t,o),e.getAttribute("style")===""&&e.removeAttribute("style"))}var c=class extends E{#t;controller=new p(this,this.#e());reconcileOn=["open","disabled","force-mount","collapsed-height"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#e(){return{state:()=>({open:this.open}),change:t=>{this.announce("primitiv-collapsible-change",{open:t})&&(this.open=t)}}}reconcile(){let t=this.open,o=t?"open":"closed",s=this.hasAttribute("disabled"),m=this.rootId();i(this,"data-state",o),i(this,"data-disabled",String(s));let[f]=this.parts(b),[n]=this.parts(H),r=f?O(f):null;if(r&&(r.id||(r.id=`${m}-trigger`),i(r,"aria-expanded",String(t)),i(r,"aria-disabled",s?"true":null),i(r,"data-disabled",String(s)),i(r,"data-state",o)),n){n.id||(n.id=`${m}-content`);let l=n.getAttribute("collapsed-height"),a=l!==null,N=a||n.hasAttribute("force-mount");i(n,"hidden",t||N?null:""),i(n,"aria-hidden",t||a?null:"true"),i(n,"data-state",o),i(n,"data-disabled",String(s)),i(n,"data-clamped",a?"true":null),I(n,L,a?M(l):""),t&&this.#t===!1&&n.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}r&&i(r,"aria-controls",n?n.id:null);for(let l of this.parts(w))i(l,"aria-hidden","true"),i(l,"data-state",o);this.controller.setTriggers(r?[{value:"trigger",element:r,disabled:s}]:[]),this.#t=t}},h=class extends d{},u=class extends d{},g=class extends d{};function A(e=globalThis.customElements){C(e,[[R,c],[b,h],[H,u],[w,g]])}A();
+import{a as E}from"./chunks/chunk-EDLRMP2K.js";import{a as p,b as l,c as C,d as x,f as T}from"./chunks/chunk-QVNDDONZ.js";function c(e){return e.disabled?null:!e.open}function v(e,t){if(t!=="Enter"&&t!==" ")return null;let o=c(e);return o===null?null:{open:o}}var d=class extends E{#e;constructor(t,o){super(t),this.#e=o}onTriggerClick(t){let o=c({open:this.#e.state().open,disabled:t.disabled});o!==null&&this.#e.change(o)}onTriggerKeydown(t,o){let r=v({open:this.#e.state().open,disabled:t.disabled},o.key);r&&(o.preventDefault(),this.#e.change(r.open))}};var N="primitiv-collapsible",f="primitiv-collapsible-trigger",H="primitiv-collapsible-content",w="primitiv-collapsible-trigger-icon",R="--primitiv-collapsible-collapsed-height";function S(e){return e.childElementCount===1?e.firstElementChild:(C(e,`<${f}> needs exactly one element child (a <button>) to decorate.`),null)}function K(e){return Number.isNaN(Number(e))?e:`${e}px`}function L(e,t,o){e.style.getPropertyValue(t)!==o&&(e.style.setProperty(t,o),e.getAttribute("style")===""&&e.removeAttribute("style"))}var u=class extends T{#e;controller=new d(this,this.#t());reconcileOn=["open","disabled","force-mount","collapsed-height"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#t(){return{state:()=>({open:this.open}),change:t=>{this.announce("primitiv-collapsible-change",{open:t})&&(this.open=t)}}}reconcile(){let t=this.open,o=t?"open":"closed",r=this.hasAttribute("disabled"),m=this.rootId();l(this,"data-state",o),l(this,"data-disabled",String(r));let[y]=this.parts(f),[n]=this.parts(H),i=y?S(y):null;if(i&&(i.id||(i.id=`${m}-trigger`),l(i,"aria-expanded",String(t)),l(i,"aria-disabled",r?"true":null),l(i,"data-disabled",String(r)),l(i,"data-state",o)),n){n.id||(n.id=`${m}-content`);let s=n.getAttribute("collapsed-height"),a=s!==null,A=a||n.hasAttribute("force-mount");l(n,"hidden",t||A?null:""),l(n,"aria-hidden",t||a?null:"true"),l(n,"data-state",o),l(n,"data-disabled",String(r)),l(n,"data-clamped",a?"true":null),L(n,R,a?K(s):""),t&&this.#e===!1&&n.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}i&&l(i,"aria-controls",n?n.id:null);for(let s of this.parts(w))l(s,"aria-hidden","true"),l(s,"data-state",o);this.controller.setTriggers(i?[{value:"trigger",element:i,disabled:r}]:[]),this.#e=t}},b=class extends p{},h=class extends p{},g=class extends p{};function O(e=globalThis.customElements){x(e,[[N,u],[f,b],[H,h],[w,g]])}O();

package/dist/cdn/modal.js

@@ -0,0 +1 @@
+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/cdn/tabs.js

@@ -1 +1 @@
-import{a as h,b as M,c as A,d as C,i as b,j as a,k as O,l as H,n as w,o as R}from"./chunks/chunk-WVI5UEAW.js";var v=class extends R{#t;constructor(i,n){super(i),this.#t=n}onTriggerClick(i){let{active:n}=this.#t.state(),r=A({disabled:this.disabled(),active:n},i.value);if(r!==null){let l=this.ordered().map(([,d])=>d.value);this.#t.activate(r,l.indexOf(r))}}onTriggerKeydown(i,n){let{active:r,orientation:l,dir:d,activationMode:p}=this.#t.state(),u=this.ordered(),e=u.map(([,o])=>o.value),t=C({values:e,disabled:this.disabled(),active:r,orientation:l,dir:d,activationMode:p},i.value,n.key);t&&(n.preventDefault(),t.activate!==null&&this.#t.activate(t.activate,e.indexOf(t.activate)),u[e.indexOf(t.focus)][0].focus())}};var D="primitiv-tabs",I="primitiv-tabs-list",y="primitiv-tabs-trigger",L="primitiv-tabs-content";function K(s){let i=s.getAttribute("value");return s.childElementCount===1&&i!==null?{tab:s.firstElementChild,value:i}:(O(s,`<${y}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var f=class extends w{#t;#e=!1;controller=new v(this,this.#a());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(i){this.setAttribute("value",i)}#a(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(i,n)=>{this.announce("primitiv-tabs-change",{value:i,index:n})&&(this.value=i)}}}#n(){let i=this.getAttribute("activation-mode");return i==="manual"?i:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let i=this.#i(),n=this.value,r=this.rootId();a(this,"data-orientation",i);for(let e of this.parts(I)){a(e,"role","tablist"),a(e,"aria-orientation",i),a(e,"data-orientation",i);let t=e.getAttribute("label");t!==null&&a(e,"aria-label",t)}let l=new Map;for(let e of this.parts(L)){let t=e.getAttribute("value");t!==null&&l.set(t,e)}let d=this.parts(y).flatMap(e=>{let t=K(e);return t?[{trigger:e,...t}]:[]}),p=M({values:d.map(e=>e.value),active:n});this.controller.setTriggers(d.map(({trigger:e,tab:t,value:o})=>({value:o,element:t,disabled:e.hasAttribute("disabled")})));for(let{trigger:e,tab:t,value:o}of d){let c=l.get(o),x=o===n,E=e.hasAttribute("disabled");t.id||(t.id=h(r,"trigger",o)),c&&!c.id&&(c.id=h(r,"panel",o)),a(t,"role","tab"),a(t,"aria-selected",String(x)),a(t,"aria-controls",c?c.id:null),a(t,"tabindex",o===p?"0":"-1"),a(t,"aria-disabled",E?"true":null),a(t,"data-disabled",E?"":null),a(t,"data-state",x?"active":"inactive"),a(t,"data-orientation",i),c&&a(c,"aria-labelledby",t.id)}for(let[e,t]of l){let o=e===n;a(t,"role","tabpanel"),a(t,"tabindex","0"),a(t,"hidden",o?null:""),a(t,"data-state",o?"active":"inactive"),a(t,"data-orientation",i)}let u=l.get(n);this.#e&&n!==this.#t&&u&&u.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=n,this.#e=!0}},m=class extends b{},g=class extends b{},T=class extends b{};function k(s=globalThis.customElements){H(s,[[D,f],[I,m],[y,g],[L,T]])}k();
+import{a as f,b as R,c as w}from"./chunks/chunk-HXGMU6SD.js";import{a as H}from"./chunks/chunk-EDLRMP2K.js";import{a as v,b as n,c as A,d as O,f as C}from"./chunks/chunk-QVNDDONZ.js";function S(i){return i.active??i.values[0]}function g(i,e){return i.disabled.has(e)||i.active===e?null:e}function K(i,e,o){let s=R({orientation:i.orientation,dir:i.dir,homeEnd:!0,activate:!0})[o],l=w({action:s,navigable:i.values,currentKey:e});if(!l)return null;let d=l.target,u=i.activationMode==="automatic"||s==="activate";return{focus:d,activate:u?g(i,d):null}}var p=class extends H{#t;constructor(e,o){super(e),this.#t=o}onTriggerClick(e){let{active:o}=this.#t.state(),s=g({disabled:this.disabled(),active:o},e.value);if(s!==null){let l=this.ordered().map(([,d])=>d.value);this.#t.activate(s,l.indexOf(s))}}onTriggerKeydown(e,o){let{active:s,orientation:l,dir:d,activationMode:u}=this.#t.state(),b=this.ordered(),a=b.map(([,r])=>r.value),t=K({values:a,disabled:this.disabled(),active:s,orientation:l,dir:d,activationMode:u},e.value,o.key);t&&(o.preventDefault(),t.activate!==null&&this.#t.activate(t.activate,a.indexOf(t.activate)),b[a.indexOf(t.focus)][0].focus())}};var D="primitiv-tabs",k="primitiv-tabs-list",x="primitiv-tabs-trigger",I="primitiv-tabs-content";function z(i){let e=i.getAttribute("value");return i.childElementCount===1&&e!==null?{tab:i.firstElementChild,value:e}:(A(i,`<${x}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var m=class extends C{#t;#e=!1;controller=new p(this,this.#a());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(e){this.setAttribute("value",e)}#a(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(e,o)=>{this.announce("primitiv-tabs-change",{value:e,index:o})&&(this.value=e)}}}#n(){let e=this.getAttribute("activation-mode");return e==="manual"?e:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let e=this.#i(),o=this.value,s=this.rootId();n(this,"data-orientation",e);for(let a of this.parts(k)){n(a,"role","tablist"),n(a,"aria-orientation",e),n(a,"data-orientation",e);let t=a.getAttribute("label");t!==null&&n(a,"aria-label",t)}let l=new Map;for(let a of this.parts(I)){let t=a.getAttribute("value");t!==null&&l.set(t,a)}let d=this.parts(x).flatMap(a=>{let t=z(a);return t?[{trigger:a,...t}]:[]}),u=S({values:d.map(a=>a.value),active:o});this.controller.setTriggers(d.map(({trigger:a,tab:t,value:r})=>({value:r,element:t,disabled:a.hasAttribute("disabled")})));for(let{trigger:a,tab:t,value:r}of d){let c=l.get(r),M=r===o,E=a.hasAttribute("disabled");t.id||(t.id=f(s,"trigger",r)),c&&!c.id&&(c.id=f(s,"panel",r)),n(t,"role","tab"),n(t,"aria-selected",String(M)),n(t,"aria-controls",c?c.id:null),n(t,"tabindex",r===u?"0":"-1"),n(t,"aria-disabled",E?"true":null),n(t,"data-disabled",E?"":null),n(t,"data-state",M?"active":"inactive"),n(t,"data-orientation",e),c&&n(c,"aria-labelledby",t.id)}for(let[a,t]of l){let r=a===o;n(t,"role","tabpanel"),n(t,"tabindex","0"),n(t,"hidden",r?null:""),n(t,"data-state",r?"active":"inactive"),n(t,"data-orientation",e)}let b=l.get(o);this.#e&&o!==this.#t&&b&&b.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=o,this.#e=!0}},h=class extends v{},T=class extends v{},y=class extends v{};function L(i=globalThis.customElements){O(i,[[D,m],[k,h],[x,T],[I,y]])}L();