@primitiv-ui/web 0.1.56 → 0.1.57

package/dist/frameworks/svelte.d.ts

@@ -19,11 +19,12 @@
 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 { PrimitivDropdownCheckboxItemElement, PrimitivDropdownContentElement, PrimitivDropdownElement, PrimitivDropdownGroupElement, PrimitivDropdownItemElement, PrimitivDropdownItemIndicatorElement, PrimitivDropdownLabelElement, PrimitivDropdownRadioGroupElement, PrimitivDropdownRadioItemElement, PrimitivDropdownSeparatorElement, PrimitivDropdownSubContentElement, PrimitivDropdownSubElement, PrimitivDropdownSubTriggerElement, PrimitivDropdownTriggerElement } from "../dropdown/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 { PrimitivTooltipArrowElement, PrimitivTooltipContentElement, PrimitivTooltipElement, PrimitivTooltipProviderElement, PrimitivTooltipTriggerElement } from "../tooltip/elements.js";
-import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivDropdownChangeEvent, PrimitivDropdownCheckedChangeEvent, PrimitivDropdownSelectEvent, PrimitivDropdownSubChangeEvent, PrimitivDropdownValueChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } from "./events.js";
 /** Svelte's own attributes and events for an element. */
 type Attributes<E extends HTMLElement> = HTMLAttributes<E>;
 declare module "svelte/elements" {
@@ -57,6 +58,49 @@ declare module "svelte/elements" {
             "onprimitiv-collapsible-show"?: (event: CustomEvent) => void;
         };
         "primitiv-collapsible-trigger-icon": Attributes<PrimitivCollapsibleTriggerIconElement>;
+        "primitiv-dropdown": Attributes<PrimitivDropdownElement> & {
+            open?: boolean;
+            "onprimitiv-dropdown-change"?: (event: PrimitivDropdownChangeEvent) => void;
+        };
+        "primitiv-dropdown-trigger": Attributes<PrimitivDropdownTriggerElement>;
+        "primitiv-dropdown-content": Attributes<PrimitivDropdownContentElement> & {
+            popover?: "auto" | "manual" | "";
+        };
+        "primitiv-dropdown-item": Attributes<PrimitivDropdownItemElement> & {
+            disabled?: boolean;
+            "onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
+        };
+        "primitiv-dropdown-checkbox-item": Attributes<PrimitivDropdownCheckboxItemElement> & {
+            checked?: boolean | "indeterminate";
+            disabled?: boolean;
+            "onprimitiv-dropdown-checked-change"?: (event: PrimitivDropdownCheckedChangeEvent) => void;
+            "onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
+        };
+        "primitiv-dropdown-radio-group": Attributes<PrimitivDropdownRadioGroupElement> & {
+            value?: string;
+            "onprimitiv-dropdown-value-change"?: (event: PrimitivDropdownValueChangeEvent) => void;
+        };
+        "primitiv-dropdown-radio-item": Attributes<PrimitivDropdownRadioItemElement> & {
+            value: string;
+            disabled?: boolean;
+            "onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
+        };
+        "primitiv-dropdown-item-indicator": Attributes<PrimitivDropdownItemIndicatorElement> & {
+            "force-mount"?: boolean;
+        };
+        "primitiv-dropdown-group": Attributes<PrimitivDropdownGroupElement>;
+        "primitiv-dropdown-label": Attributes<PrimitivDropdownLabelElement>;
+        "primitiv-dropdown-separator": Attributes<PrimitivDropdownSeparatorElement>;
+        "primitiv-dropdown-sub": Attributes<PrimitivDropdownSubElement> & {
+            open?: boolean;
+            "onprimitiv-dropdown-sub-change"?: (event: PrimitivDropdownSubChangeEvent) => void;
+        };
+        "primitiv-dropdown-sub-trigger": Attributes<PrimitivDropdownSubTriggerElement> & {
+            disabled?: boolean;
+        };
+        "primitiv-dropdown-sub-content": Attributes<PrimitivDropdownSubContentElement> & {
+            popover?: "auto" | "manual" | "";
+        };
         "primitiv-modal": Attributes<PrimitivModalElement> & {
             open?: boolean;
             "onprimitiv-modal-change"?: (event: PrimitivModalChangeEvent) => void;

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, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivDropdownChangeEvent, PrimitivDropdownCheckedChangeEvent, PrimitivDropdownSelectEvent, PrimitivDropdownSubChangeEvent, PrimitivDropdownValueChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } 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" {
@@ -57,6 +57,55 @@ declare module "vue" {
             "primitiv-collapsible-show": (event: CustomEvent) => void;
         }>;
         "primitiv-collapsible-trigger-icon": Tag<Record<never, never>>;
+        "primitiv-dropdown": Tag<{
+            open?: boolean | "";
+        }, {
+            "primitiv-dropdown-change": (event: PrimitivDropdownChangeEvent) => void;
+        }>;
+        "primitiv-dropdown-trigger": Tag<Record<never, never>>;
+        "primitiv-dropdown-content": Tag<{
+            popover?: "auto" | "manual" | "";
+        }>;
+        "primitiv-dropdown-item": Tag<{
+            disabled?: boolean | "";
+        }, {
+            "primitiv-dropdown-select": (event: PrimitivDropdownSelectEvent) => void;
+        }>;
+        "primitiv-dropdown-checkbox-item": Tag<{
+            checked?: boolean | "indeterminate";
+            disabled?: boolean | "";
+        }, {
+            "primitiv-dropdown-checked-change": (event: PrimitivDropdownCheckedChangeEvent) => void;
+            "primitiv-dropdown-select": (event: PrimitivDropdownSelectEvent) => void;
+        }>;
+        "primitiv-dropdown-radio-group": Tag<{
+            value?: string;
+        }, {
+            "primitiv-dropdown-value-change": (event: PrimitivDropdownValueChangeEvent) => void;
+        }>;
+        "primitiv-dropdown-radio-item": Tag<{
+            value: string;
+            disabled?: boolean | "";
+        }, {
+            "primitiv-dropdown-select": (event: PrimitivDropdownSelectEvent) => void;
+        }>;
+        "primitiv-dropdown-item-indicator": Tag<{
+            forceMount?: boolean | "";
+        }>;
+        "primitiv-dropdown-group": Tag<Record<never, never>>;
+        "primitiv-dropdown-label": Tag<Record<never, never>>;
+        "primitiv-dropdown-separator": Tag<Record<never, never>>;
+        "primitiv-dropdown-sub": Tag<{
+            open?: boolean | "";
+        }, {
+            "primitiv-dropdown-sub-change": (event: PrimitivDropdownSubChangeEvent) => void;
+        }>;
+        "primitiv-dropdown-sub-trigger": Tag<{
+            disabled?: boolean | "";
+        }>;
+        "primitiv-dropdown-sub-content": Tag<{
+            popover?: "auto" | "manual" | "";
+        }>;
         "primitiv-modal": Tag<{
             open?: boolean | "";
         }, {

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/popover/PopoverController.d.ts

@@ -34,6 +34,12 @@ export type PopoverControllerHost = {
  *   inside it closes it and hands focus back to the trigger, and where the
  *   browser has no Popover API a press outside closes it.
  *
+ * - **Placement** — while it shows, the panel carries `data-side` (the side of
+ *   its anchor it landed on, after any `position-try-fallbacks` flip) and
+ *   `data-align` (the third of its facing edge the anchor's centre is in),
+ *   measured as it opens and again on every scroll and resize, so a stylesheet
+ *   can point an arrow at the anchor whichever way it flipped.
+ *
  * Opening from the trigger is the host's, as a plain click.
  */
 export declare class PopoverController {

package/dist/popover/PopoverController.js

@@ -1,4 +1,5 @@
-import { FOCUSABLE_SELECTOR, popoverKeydown, popoverPressDismisses } from "@primitiv-ui/core";
+import { FOCUSABLE_SELECTOR, panelPlacement, popoverKeydown, popoverPressDismisses } from "@primitiv-ui/core";
+import { write } from "../internal/element.js";
 /**
  * The DOM behaviour of a popover, over a `popover="auto"` panel: the browser
  * owns the top layer and light dismiss, and this adds the rest of the WAI-ARIA
@@ -12,6 +13,12 @@ import { FOCUSABLE_SELECTOR, popoverKeydown, popoverPressDismisses } from "@prim
  *   inside it closes it and hands focus back to the trigger, and where the
  *   browser has no Popover API a press outside closes it.
  *
+ * - **Placement** — while it shows, the panel carries `data-side` (the side of
+ *   its anchor it landed on, after any `position-try-fallbacks` flip) and
+ *   `data-align` (the third of its facing edge the anchor's centre is in),
+ *   measured as it opens and again on every scroll and resize, so a stylesheet
+ *   can point an arrow at the anchor whichever way it flipped.
+ *
  * Opening from the trigger is the host's, as a plain click.
  */
 export class PopoverController {
@@ -20,6 +27,8 @@ export class PopoverController {
     #connection = null;
     /** Whether this controller showed the panel and has not hidden it since. */
     #shown = false;
+    /** The scroll and resize listeners that re-measure the placement, while it shows. */
+    #following = null;
     constructor(content, host) {
         this.#content = content;
         this.#host = host;
@@ -46,6 +55,7 @@ export class PopoverController {
         this.#connection?.abort();
         this.#connection = null;
         this.#shown = false;
+        this.#unfollow();
     }
     /** Show or hide the panel to match the host's state. */
     sync() {
@@ -60,9 +70,11 @@ export class PopoverController {
             // Move focus into the panel (WAI-ARIA non-modal dialog): the first
             // focusable, or the panel itself, which carries tabindex="-1".
             (this.#content.querySelector(FOCUSABLE_SELECTOR) ?? this.#content).focus();
+            this.#follow();
         }
         else if (!open && this.#shown) {
             this.#shown = false;
+            this.#unfollow();
             try {
                 this.#content.hidePopover();
             }
@@ -71,10 +83,38 @@ export class PopoverController {
             }
         }
     }
+    /** Measure the placement now, and again on every scroll and resize until it hides. */
+    #follow() {
+        this.#following = new AbortController();
+        const options = {
+            // A scroll inside an overflow pane does not bubble to the window.
+            capture: true,
+            // Stryker disable next-line BooleanLiteral: equivalent — passive only spares the scroll from waiting on the listener.
+            passive: true,
+            signal: this.#following.signal,
+        };
+        window.addEventListener("scroll", () => this.#place(), options);
+        window.addEventListener("resize", () => this.#place(), options);
+        this.#place();
+    }
+    #unfollow() {
+        this.#following?.abort();
+        this.#following = null;
+    }
+    /** Mark the side and alignment the panel landed on, against the element it is anchored to. */
+    #place() {
+        const anchor = this.#host.source?.() ?? this.#host.trigger();
+        if (!anchor)
+            return;
+        const { side, align } = panelPlacement(this.#content.getBoundingClientRect(), anchor.getBoundingClientRect());
+        write(this.#content, "data-side", side);
+        write(this.#content, "data-align", align);
+    }
     #toggle(event) {
         if (event.newState !== "closed")
             return;
         this.#shown = false;
+        this.#unfollow();
         this.#host.change(false);
     }
     #keydown(event) {

package/dist/primitiv-web.js

@@ -1 +1 @@
-function b(e,t,o){return`${e}-${t}-${o}`}function R({orientation:e,dir:t,homeEnd:o=!1,activate:n=!1}){let i={};if(e==="horizontal"||e==="both"){let l=t==="rtl"?"ArrowLeft":"ArrowRight",c=t==="rtl"?"ArrowRight":"ArrowLeft";i[l]="next",i[c]="prev"}return(e==="vertical"||e==="both")&&(i.ArrowDown="next",i.ArrowUp="prev"),o&&(i.Home="first",i.End="last"),n&&(i.Enter="activate",i[" "]="activate"),i}function P({action:e,navigable:t,currentKey:o}){let n=t.length;if(n===0)return null;switch(e){case"activate":return{target:o};case"first":return{target:t[0]};case"last":return{target:t[n-1]};case void 0:return null;case"next":case"prev":{let i=t.indexOf(o);if(i===-1)return null;let l=e==="next"?1:n-1;return{target:t[(i+l)%n]}}}}function pt(e){return e.active??e.values[0]}function K(e,t){return e.disabled.has(t)||e.active===t?null:t}function ut(e,t,o){let n=R({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o],i=P({action:n,navigable:e.values,currentKey:t});if(!i)return null;let l=i.target,c=e.activationMode==="automatic"||n==="activate";return{focus:l,activate:c?K(e,l):null}}function ht(e,t){return e.disabled.has(t)?null:e.expanded.includes(t)?e.expanded.filter(o=>o!==t):e.multiple?[...e.expanded,t]:[t]}function mt(e,t,o){let n=R({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o];if(n==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let i=e.values.filter(c=>!e.disabled.has(c)),l=P({action:n,navigable:i,currentKey:t});return l&&{focus:l.target,toggle:null}}function S(e){return e.disabled?null:!e.open}function gt(e,t){if(t!=="Enter"&&t!==" ")return null;let o=S(e);return o===null?null:{open:o}}var x=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");function ft({key:e,shiftKey:t,active:o,count:n}){if(e!=="Tab")return null;if(n===0)return{focus:null};let i=n-1;return!t&&o===i?{focus:0}:t&&o===0?{focus:i}:null}function vt(e,t){return t.x<e.left||t.x>e.right||t.y<e.top||t.y>e.bottom}function bt(e){return e==="Escape"?{open:!1}:null}function yt({open:e,nativeLightDismiss:t,inTrigger:o,inPopover:n}){return e&&!t&&!o&&!n}function Tt({groupOpen:e,delay:t}){return e?0:t}var v=class{#t;#e=new Map;#o=null;constructor(t){this.#t=t}registerTrigger(t,o,n={}){this.#e.set(o,{value:t,disabled:n.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:o,element:n,disabled:i}of t)this.registerTrigger(o,n,{disabled:i})}unregisterTrigger(t){this.#e.delete(t)}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("click",o=>this.#n(o,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",o=>this.#n(o,this.onTriggerKeydown),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}ordered(){return[...this.#e].sort(([t],[o])=>t.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let o of this.#e.values())o.disabled&&t.add(o.value);return t}#n(t,o){for(let[n,i]of this.#e)if(n.contains(t.target))return o.call(this,i,t)}};var C=class extends v{#t;constructor(t,o){super(t),this.#t=o}#e(t){let{expanded:o,multiple:n}=this.#t.state(),i=ht({disabled:this.disabled(),expanded:o,multiple:n},t);i!==null&&this.#t.change(i)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,o){let{expanded:n,multiple:i,orientation:l,dir:c}=this.#t.state(),p=this.ordered(),a=p.map(([,d])=>d.value),s=mt({values:a,disabled:this.disabled(),expanded:n,multiple:i,orientation:l,dir:c},t.value,o.key);s&&(o.preventDefault(),s.toggle!==null&&this.#e(s.toggle),s.focus!==null&&p[a.indexOf(s.focus)][0].focus())}};var u=globalThis.HTMLElement??class{};function r(e,t,o){e.getAttribute(t)!==o&&(o===null?e.removeAttribute(t):e.setAttribute(t,o))}var It=new WeakSet;function m(e,t){It.has(e)||(It.add(e),console.error(t,e))}function f(e,t){if(e)for(let[o,n]of t)e.get(o)||e.define(o,n)}function y(e,t,o){return[...e.querySelectorAll(t)].filter(n=>n.closest(o)===e)}var ie=0,g=class extends u{#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}-${++ie}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return y(this,t,this.localName)}announce(t,o){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}))}};var re="primitiv-accordion",T="primitiv-accordion-item",Et="primitiv-accordion-trigger",Gt="primitiv-accordion-content",$t="primitiv-accordion-trigger-icon";function se(e){return(e??"").split(/\s+/).filter(Boolean)}function le(e){return e.childElementCount===1?e.firstElementChild:(m(e,`<${Et}> needs exactly one element child (a <button>) to decorate.`),null)}var D=class extends g{#t=new Set;#e=!1;controller=new C(this,this.#o());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return se(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#o(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#n(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#n(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),o=this.rootId();r(this,"data-orientation",this.#n());let n=[];for(let i of this.parts(T)){let l=i.getAttribute("value");if(l===null){m(i,`<${T}> needs a value, which pairs it with the root's value.`);continue}let c=t.has(l),p=c?"open":"closed",[a]=y(i,Et,T),[s]=y(i,Gt,T),d=a?le(a):null;if(d){let h=a.hasAttribute("disabled");n.push({value:l,element:d,disabled:h}),d.id||(d.id=b(o,"heading",l)),r(d,"aria-expanded",String(c)),r(d,"aria-disabled",String(h)),r(d,"data-disabled",String(h)),r(d,"data-state",p)}if(s){s.id||(s.id=b(o,"panel",l));let h=s.hasAttribute("force-mount");s.hasAttribute("role")||s.setAttribute("role","region"),r(s,"aria-labelledby",d?d.id:null),r(s,"hidden",c||h?null:""),r(s,"aria-hidden",c?null:"true"),r(s,"data-state",p),this.#e&&c&&!this.#t.has(l)&&s.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}d&&r(d,"aria-controls",s?s.id:null);for(let h of y(i,$t,T))r(h,"aria-hidden","true"),r(h,"data-state",p)}this.controller.setTriggers(n),this.#t=t,this.#e=!0}},N=class extends u{},k=class extends u{},I=class extends u{},G=class extends u{};function xt(e=globalThis.customElements){f(e,[[re,D],[T,N],[Et,k],[Gt,I],[$t,G]])}var A=class extends v{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let o=S({open:this.#t.state().open,disabled:t.disabled});o!==null&&this.#t.change(o)}onTriggerKeydown(t,o){let n=gt({open:this.#t.state().open,disabled:t.disabled},o.key);n&&(o.preventDefault(),this.#t.change(n.open))}};var ae="primitiv-collapsible",Ct="primitiv-collapsible-trigger",Bt="primitiv-collapsible-content",_t="primitiv-collapsible-trigger-icon",de="--primitiv-collapsible-collapsed-height";function ce(e){return e.childElementCount===1?e.firstElementChild:(m(e,`<${Ct}> needs exactly one element child (a <button>) to decorate.`),null)}function pe(e){return Number.isNaN(Number(e))?e:`${e}px`}function ue(e,t,o){e.style.getPropertyValue(t)!==o&&(e.style.setProperty(t,o),e.getAttribute("style")===""&&e.removeAttribute("style"))}var $=class extends g{#t;controller=new A(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",n=this.hasAttribute("disabled"),i=this.rootId();r(this,"data-state",o),r(this,"data-disabled",String(n));let[l]=this.parts(Ct),[c]=this.parts(Bt),p=l?ce(l):null;if(p&&(p.id||(p.id=`${i}-trigger`),r(p,"aria-expanded",String(t)),r(p,"aria-disabled",n?"true":null),r(p,"data-disabled",String(n)),r(p,"data-state",o)),c){c.id||(c.id=`${i}-content`);let a=c.getAttribute("collapsed-height"),s=a!==null,d=s||c.hasAttribute("force-mount");r(c,"hidden",t||d?null:""),r(c,"aria-hidden",t||s?null:"true"),r(c,"data-state",o),r(c,"data-disabled",String(n)),r(c,"data-clamped",s?"true":null),ue(c,de,s?pe(a):""),t&&this.#t===!1&&c.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}p&&r(p,"aria-controls",c?c.id:null);for(let a of this.parts(_t))r(a,"aria-hidden","true"),r(a,"data-state",o);this.controller.setTriggers(p?[{value:"trigger",element:p,disabled:n}]:[]),this.#t=t}},B=class extends u{},_=class extends u{},F=class extends u{};function At(e=globalThis.customElements){f(e,[[ae,$],[Ct,B],[Bt,_],[_t,F]])}var w=class{#t;#e;#o=null;constructor(t,o){this.#t=t,this.#e=o}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o,o=this.#t;o.addEventListener("close",()=>this.#e.change(!1),{signal:t}),o.addEventListener("cancel",n=>this.#n(n),{signal:t}),o.addEventListener("pointerdown",n=>this.#i(n),{signal:t}),o.addEventListener("keydown",n=>this.#r(n),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}sync(){let{open:t}=this.#e.state();t&&!this.#t.open?this.#t.showModal():!t&&this.#t.open&&this.#t.close()}#n(t){this.#e.escapeKeyDown?.(t);let o=t.defaultPrevented;t.preventDefault(),o||this.#e.change(!1)}#i(t){let o={x:t.clientX,y:t.clientY};vt(this.#t.getBoundingClientRect(),o)&&(this.#e.pointerDownOutside?.(t),t.defaultPrevented||this.#e.change(!1))}#r(t){if(!this.#t.open)return;let o=[...this.#t.querySelectorAll(x)],n=ft({key:t.key,shiftKey:t.shiftKey,active:o.indexOf(document.activeElement),count:o.length});n&&(t.preventDefault(),n.focus!==null&&o[n.focus].focus())}};var he="primitiv-modal",Ft="primitiv-modal-trigger",Mt="primitiv-modal-content",Ut="primitiv-modal-title",zt="primitiv-modal-description",qt="primitiv-modal-close";function wt(e,t){return e.childElementCount===1?e.firstElementChild:(m(e,`<${e.localName}> needs exactly one element child (${t}) to decorate.`),null)}function me(e){let t=e.firstElementChild;return e.childElementCount===1&&t instanceof HTMLDialogElement?t:(m(e,`<${Mt}> needs exactly one <dialog> child to decorate.`),null)}var U=class extends g{#t=null;#e=null;#o=[];#n=[];#i=null;controller={connect:()=>this.#l(),disconnect:()=>this.#a()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#r(){return{state:()=>({open:this.open}),change:t=>this.#s(t)}}#s(t){t!==this.open&&(this.announce("primitiv-modal-change",{open:t})?this.open=t:this.#e?.sync())}#l(){this.#i=new AbortController,this.addEventListener("click",t=>this.#c(t),{signal:this.#i.signal}),this.#e?.connect()}#a(){this.#i.abort(),this.#i=null,this.#e?.disconnect(),this.#t&&r(this.#t,"open",null)}#c(t){let o=t.target;this.#o.some(n=>n.contains(o))?this.#s(!0):this.#n.some(n=>n.contains(o))&&this.#s(!1)}#p(t){t!==this.#t&&(this.#e?.disconnect(),t&&r(t,"open",null),this.#t=t,this.#e=t?new w(t,this.#r()):null,this.#e?.connect())}reconcile(){let t=this.open,o=t?"open":"closed",n=this.rootId();r(this,"data-state",o);let[i]=this.parts(Mt),l=i?me(i):null,[c]=this.parts(Ut),p=c?wt(c,"a heading"):null,[a]=this.parts(zt),s=a?wt(a,"a <p>"):null;p&&!p.id&&(p.id=`${n}-title`),s&&!s.id&&(s.id=`${n}-description`),l&&(l.id||(l.id=`${n}-content`),r(l,"data-state",o),r(l,"aria-labelledby",p?p.id:null),r(l,"aria-describedby",s?s.id:null)),this.#o=this.#d(Ft);for(let d of this.#o)r(d,"aria-haspopup","dialog"),r(d,"aria-expanded",String(t)),r(d,"aria-controls",l?l.id:null);this.#n=this.#d(qt),this.#p(l),this.#e?.sync()}#d(t){return this.parts(t).flatMap(o=>wt(o,"a <button>")??[])}},z=class extends u{},q=class extends u{},W=class extends u{},Y=class extends u{},j=class extends u{};function Ot(e=globalThis.customElements){f(e,[[he,U],[Ft,z],[Mt,q],[Ut,W],[zt,Y],[qt,j]])}var M=class{#t;#e;#o=null;#n=!1;constructor(t,o){this.#t=t,this.#e=o}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",o=>this.#i(o),{signal:t}),this.#t.addEventListener("keydown",o=>this.#r(o),{signal:t}),document.addEventListener("click",o=>this.#s(o),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let o=this.#e.source?.();o?this.#t.showPopover({source:o}):this.#t.showPopover(),(this.#t.querySelector(x)??this.#t).focus()}else if(!t&&this.#n){this.#n=!1;try{this.#t.hidePopover()}catch{}}}#i(t){t.newState==="closed"&&(this.#n=!1,this.#e.change(!1))}#r(t){t.defaultPrevented||!bt(t.key)||(t.preventDefault(),this.#e.change(!1),this.#e.trigger()?.focus())}#s(t){let o=t.target;yt({open:this.#e.state().open,nativeLightDismiss:"popover"in HTMLElement.prototype,inTrigger:this.#e.trigger()?.contains(o)??!1,inPopover:o.closest("[popover]")!==null})&&this.#e.change(!1)}};var ge="primitiv-popover",Wt="primitiv-popover-trigger",Yt="primitiv-popover-anchor",jt="primitiv-popover-content",Vt="primitiv-popover-title",Xt="primitiv-popover-description",Jt="primitiv-popover-close";function O(e,t){return e.childElementCount===1?e.firstElementChild:(m(e,`<${e.localName}> needs exactly one element child (${t}) to decorate.`),null)}var V=class extends g{#t=null;#e=null;#o=null;#n=null;#i=[];#r=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),trigger:()=>this.#o,source:()=>this.#n??this.#o}}#l(t){t!==this.open&&(this.announce("primitiv-popover-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#a(){this.#r=new AbortController,this.addEventListener("click",t=>this.#p(t),{signal:this.#r.signal}),this.#e?.connect()}#c(){this.#r.abort(),this.#r=null,this.#e?.disconnect()}#p(t){let o=t.target;this.#o?.contains(o)?this.#l(!this.open):this.#i.some(n=>n.contains(o))&&this.#l(!1)}#d(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new M(t,this.#s()):null,this.#e?.connect())}reconcile(){let t=this.open,o=t?"open":"closed",n=this.rootId();r(this,"data-state",o);let[i=null]=this.parts(jt),[l]=this.parts(Wt),[c]=this.parts(Yt),[p]=this.parts(Vt),[a]=this.parts(Xt);this.#o=l?O(l,"a <button>"):null,this.#n=c?O(c,"the element to anchor to"):null;let s=p?O(p,"a heading"):null,d=a?O(a,"a <p>"):null;s&&!s.id&&(s.id=`${n}-title`),d&&!d.id&&(d.id=`${n}-description`),i&&(i.id||(i.id=`${n}-content`),r(i,"role","dialog"),i.hasAttribute("popover")||i.setAttribute("popover","auto"),r(i,"tabindex","-1"),r(i,"data-state",o),r(i,"aria-labelledby",s?s.id:null),r(i,"aria-describedby",d?d.id:null)),this.#o&&(r(this.#o,"aria-haspopup","dialog"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",i?i.id:null)),this.#i=this.parts(Jt).flatMap(h=>O(h,"a <button>")??[]),this.#d(i),this.#e?.sync()}},X=class extends u{},J=class extends u{},Q=class extends u{},Z=class extends u{},tt=class extends u{},et=class extends u{};function Lt(e=globalThis.customElements){f(e,[[ge,V],[Wt,X],[Yt,J],[jt,Q],[Vt,Z],[Xt,tt],[Jt,et]])}var L=class extends v{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let{active:o}=this.#t.state(),n=K({disabled:this.disabled(),active:o},t.value);if(n!==null){let i=this.ordered().map(([,l])=>l.value);this.#t.activate(n,i.indexOf(n))}}onTriggerKeydown(t,o){let{active:n,orientation:i,dir:l,activationMode:c}=this.#t.state(),p=this.ordered(),a=p.map(([,d])=>d.value),s=ut({values:a,disabled:this.disabled(),active:n,orientation:i,dir:l,activationMode:c},t.value,o.key);s&&(o.preventDefault(),s.activate!==null&&this.#t.activate(s.activate,a.indexOf(s.activate)),p[a.indexOf(s.focus)][0].focus())}};var fe="primitiv-tabs",Qt="primitiv-tabs-list",Ht="primitiv-tabs-trigger",Zt="primitiv-tabs-content";function ve(e){let t=e.getAttribute("value");return e.childElementCount===1&&t!==null?{tab:e.firstElementChild,value:t}:(m(e,`<${Ht}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var ot=class extends g{#t;#e=!1;controller=new L(this,this.#o());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#o(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(t,o)=>{this.announce("primitiv-tabs-change",{value:t,index:o})&&(this.value=t)}}}#n(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#i(),o=this.value,n=this.rootId();r(this,"data-orientation",t);for(let a of this.parts(Qt)){r(a,"role","tablist"),r(a,"aria-orientation",t),r(a,"data-orientation",t);let s=a.getAttribute("label");s!==null&&r(a,"aria-label",s)}let i=new Map;for(let a of this.parts(Zt)){let s=a.getAttribute("value");s!==null&&i.set(s,a)}let l=this.parts(Ht).flatMap(a=>{let s=ve(a);return s?[{trigger:a,...s}]:[]}),c=pt({values:l.map(a=>a.value),active:o});this.controller.setTriggers(l.map(({trigger:a,tab:s,value:d})=>({value:d,element:s,disabled:a.hasAttribute("disabled")})));for(let{trigger:a,tab:s,value:d}of l){let h=i.get(d),Dt=d===o,Nt=a.hasAttribute("disabled");s.id||(s.id=b(n,"trigger",d)),h&&!h.id&&(h.id=b(n,"panel",d)),r(s,"role","tab"),r(s,"aria-selected",String(Dt)),r(s,"aria-controls",h?h.id:null),r(s,"tabindex",d===c?"0":"-1"),r(s,"aria-disabled",Nt?"true":null),r(s,"data-disabled",Nt?"":null),r(s,"data-state",Dt?"active":"inactive"),r(s,"data-orientation",t),h&&r(h,"aria-labelledby",s.id)}for(let[a,s]of i){let d=a===o;r(s,"role","tabpanel"),r(s,"tabindex","0"),r(s,"hidden",d?null:""),r(s,"data-state",d?"active":"inactive"),r(s,"data-orientation",t)}let p=i.get(o);this.#e&&o!==this.#t&&p&&p.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=o,this.#e=!0}},nt=class extends u{},it=class extends u{},rt=class extends u{};function Rt(e=globalThis.customElements){f(e,[[fe,ot],[Qt,nt],[Ht,it],[Zt,rt]])}var H=class{#t;#e=null;#o=null;#n=t=>this.#l(t);#i=t=>this.#a(t);constructor(t){this.#t=t}openNow(){this.#s(),this.#t.change(!0),this.#t.tooltipGroup().opened()}hoverStart(){let t=Tt({groupOpen:this.#t.tooltipGroup().isOpen(),delay:this.#t.delay()});if(t===0){this.openNow();return}this.#e=setTimeout(()=>{this.openNow(),this.#e=null},t)}closeNow(){this.holdOpen(),this.#t.change(!1),this.#t.tooltipGroup().closed()}hoverEnd(){this.#s(),this.#o=setTimeout(()=>{this.#t.change(!1),this.#t.tooltipGroup().closed(),this.#o=null},100)}holdOpen(){this.#o!==null&&(clearTimeout(this.#o),this.#o=null)}sync(){let{open:t}=this.#t.state();t?(document.addEventListener("keydown",this.#n),document.addEventListener("pointerdown",this.#i)):this.#r()}#r(){document.removeEventListener("keydown",this.#n),document.removeEventListener("pointerdown",this.#i)}disconnect(){this.#s(),this.holdOpen(),this.#r()}#s(){this.#e!==null&&(clearTimeout(this.#e),this.#e=null)}#l(t){t.key==="Escape"&&(this.#t.escapeKeyDown?.(t),t.defaultPrevented||this.closeNow())}#a(t){this.#t.content()?.contains(t.target)||(this.#t.pointerDownOutside?.(t),t.defaultPrevented||this.closeNow())}};var E=class{#t;#e=!1;#o=null;constructor(t){this.#t=t}isOpen(){return this.#e}opened(){this.#o!==null&&(clearTimeout(this.#o),this.#o=null),this.#e=!0}closed(){clearTimeout(this.#o??void 0),this.#o=setTimeout(()=>{this.#e=!1,this.#o=null},this.#t())}dispose(){clearTimeout(this.#o??void 0)}};var be="primitiv-tooltip",ee="primitiv-tooltip-provider",Kt="primitiv-tooltip-trigger",oe="primitiv-tooltip-content",ye="primitiv-tooltip-arrow",te=700,ne=300;function Pt(e,t,o){let n=Number(e.getAttribute(t)??Number.NaN);return Number.isNaN(n)?o:n}var Te=new E(()=>ne),st=class extends u{#t;get group(){return this.#t??=new E(()=>Pt(this,"skip-delay-duration",ne))}},lt=class extends g{#t=null;#e=null;#o=null;#n=null;#i=new H(this.#r());controller={connect:()=>{},disconnect:()=>this.#s()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#r(){let t=()=>this.closest(ee);return{state:()=>({open:this.open}),change:o=>{o!==this.open&&this.announce("primitiv-tooltip-change",{open:o})&&(this.open=o)},delay:()=>{let o=t();return Pt(this,"delay-duration",o?Pt(o,"delay-duration",te):te)},tooltipGroup:()=>t()?.group??Te,content:()=>this.#e}}#s(){this.open&&this.#r().tooltipGroup().closed(),this.#n?.abort(),this.#n=null,this.#t=null,this.#e=null,this.#o=null,this.#i.disconnect()}#l(t,o){if(t===this.#t&&o===this.#e)return;this.#n?.abort(),this.#n=new AbortController,this.#t=t,this.#e=o;let n={signal:this.#n.signal},i=this.#i;t?.addEventListener("pointerenter",()=>i.hoverStart(),n),t?.addEventListener("pointerleave",()=>this.hasAttribute("disable-hoverable-content")?i.closeNow():i.hoverEnd(),n),t?.addEventListener("focus",()=>i.openNow(),n),t?.addEventListener("blur",()=>i.closeNow(),n),o?.addEventListener("pointerenter",()=>i.holdOpen(),n),o?.addEventListener("pointerleave",()=>i.closeNow(),n)}reconcile(){let t=this.open,o=t?"open":"closed";r(this,"data-state",o);let[n]=this.parts(Kt),[i=null]=this.parts(oe),l=n?Ee(n):null;i&&(i.id||(i.id=`${this.rootId()}-content`),r(i,"role","tooltip"),i.hasAttribute("popover")||i.setAttribute("popover","manual"),r(i,"data-state",o)),l&&(r(l,"aria-describedby",i?i.id:null),r(l,"data-state",o)),this.#l(l,i),this.#a(t?i:null),this.#i.sync()}#a(t){if(t===this.#o)return;if(this.#o)try{this.#o.hidePopover()}catch{}if(this.#o=t,!t)return;let o=t;this.#t?o.showPopover({source:this.#t}):o.showPopover()}};function Ee(e){return e.childElementCount===1?e.firstElementChild:(m(e,`<${Kt}> needs exactly one element child (a <button>) to decorate.`),null)}var at=class extends u{},dt=class extends u{},ct=class extends u{};function St(e=globalThis.customElements){f(e,[[be,lt],[ee,st],[Kt,at],[oe,dt],[ye,ct]])}xt();At();Ot();Lt();Rt();St();export{C as AccordionController,A as CollapsibleController,w as ModalController,M as PopoverController,I as PrimitivAccordionContentElement,D as PrimitivAccordionElement,N as PrimitivAccordionItemElement,k as PrimitivAccordionTriggerElement,G as PrimitivAccordionTriggerIconElement,_ as PrimitivCollapsibleContentElement,$ as PrimitivCollapsibleElement,B as PrimitivCollapsibleTriggerElement,F as PrimitivCollapsibleTriggerIconElement,j as PrimitivModalCloseElement,q as PrimitivModalContentElement,Y as PrimitivModalDescriptionElement,U as PrimitivModalElement,W as PrimitivModalTitleElement,z as PrimitivModalTriggerElement,J as PrimitivPopoverAnchorElement,et as PrimitivPopoverCloseElement,Q as PrimitivPopoverContentElement,tt as PrimitivPopoverDescriptionElement,V as PrimitivPopoverElement,Z as PrimitivPopoverTitleElement,X as PrimitivPopoverTriggerElement,rt as PrimitivTabsContentElement,ot as PrimitivTabsElement,nt as PrimitivTabsListElement,it as PrimitivTabsTriggerElement,ct as PrimitivTooltipArrowElement,dt as PrimitivTooltipContentElement,lt as PrimitivTooltipElement,st as PrimitivTooltipProviderElement,at as PrimitivTooltipTriggerElement,L as TabsController,H as TooltipController,E as TooltipGroup,xt as defineAccordion,At as defineCollapsible,Ot as defineModal,Lt as definePopover,Rt as defineTabs,St as defineTooltip};
+function b(o,t,e){return`${o}-${t}-${e}`}function N({orientation:o,dir:t,homeEnd:e=!1,activate:n=!1}){let i={};if(o==="horizontal"||o==="both"){let a=t==="rtl"?"ArrowLeft":"ArrowRight",l=t==="rtl"?"ArrowRight":"ArrowLeft";i[a]="next",i[l]="prev"}return(o==="vertical"||o==="both")&&(i.ArrowDown="next",i.ArrowUp="prev"),e&&(i.Home="first",i.End="last"),n&&(i.Enter="activate",i[" "]="activate"),i}function I({action:o,navigable:t,currentKey:e}){let n=t.length;if(n===0)return null;switch(o){case"activate":return{target:e};case"first":return{target:t[0]};case"last":return{target:t[n-1]};case void 0:return null;case"next":case"prev":{let i=t.indexOf(e);if(i===-1)return null;let a=o==="next"?1:n-1;return{target:t[(i+a)%n]}}}}function St(o){return o.active??o.values[0]}function G(o,t){return o.disabled.has(t)||o.active===t?null:t}function Dt(o,t,e){let n=N({orientation:o.orientation,dir:o.dir,homeEnd:!0,activate:!0})[e],i=I({action:n,navigable:o.values,currentKey:t});if(!i)return null;let a=i.target,l=o.activationMode==="automatic"||n==="activate";return{focus:a,activate:l?G(o,a):null}}function Kt(o,t){return o.disabled.has(t)?null:o.expanded.includes(t)?o.expanded.filter(e=>e!==t):o.multiple?[...o.expanded,t]:[t]}function kt(o,t,e){let n=N({orientation:o.orientation,dir:o.dir,homeEnd:!0,activate:!0})[e];if(n==="activate")return o.disabled.has(t)?null:{focus:null,toggle:t};let i=o.values.filter(l=>!o.disabled.has(l)),a=I({action:n,navigable:i,currentKey:t});return a&&{focus:a.target,toggle:null}}function _(o){return o.disabled?null:!o.open}function Nt(o,t){if(t!=="Enter"&&t!==" ")return null;let e=_(o);return e===null?null:{open:e}}var C=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");var y='[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])';function It({key:o,active:t,count:e}){if(e===0)return null;switch(o){case"ArrowDown":return{focus:(t+1)%e};case"ArrowUp":return{focus:t<=0?e-1:t-1};case"Home":return{focus:0};case"End":return{focus:e-1};case"Enter":case" ":return t<0?null:{activate:t};case"Escape":return{open:!1};default:return null}}var Gt=500;function _t({query:o,key:t,labels:e,active:n}){if(t.length!==1||t===" ")return null;let i=(o+t).toLowerCase(),l=[...i].every(c=>c===i[0])?i[0]:i,d=Math.max(n,0)+(l.length===1?1:0);for(let c=0;c<e.length;c++){let s=(d+c)%e.length;if(e[s].trim().toLowerCase().startsWith(l))return{query:i,focus:s}}return{query:i,focus:null}}function $t({key:o,shiftKey:t,active:e,count:n}){if(o!=="Tab")return null;if(n===0)return{focus:null};let i=n-1;return!t&&e===i?{focus:0}:t&&e===0?{focus:i}:null}function Bt(o,t){return t.x<o.left||t.x>o.right||t.y<o.top||t.y>o.bottom}function M(o,t){let e={top:t.top-o.bottom,bottom:o.top-t.bottom,left:t.left-o.right,right:o.left-t.right},n=Object.keys(e).reduce((u,h)=>e[h]>e[u]?h:u),i=n==="top"||n==="bottom",[a,l,d]=i?[o.left,o.right,(t.left+t.right)/2]:[o.top,o.bottom,(t.top+t.bottom)/2],c=(d-a)/(l-a),s=c<1/3?i?"left":"top":c>2/3?i?"right":"bottom":"center";return{side:n,align:s}}function Ut(o){return o==="Escape"?{open:!1}:null}function qt({open:o,nativeLightDismiss:t,inTrigger:e,inPopover:n}){return o&&!t&&!e&&!n}function zt({groupOpen:o,delay:t}){return o?0:t}var v=class{#t;#e=new Map;#o=null;constructor(t){this.#t=t}registerTrigger(t,e,n={}){this.#e.set(e,{value:t,disabled:n.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:e,element:n,disabled:i}of t)this.registerTrigger(e,n,{disabled:i})}unregisterTrigger(t){this.#e.delete(t)}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("click",e=>this.#n(e,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",e=>this.#n(e,this.onTriggerKeydown),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}ordered(){return[...this.#e].sort(([t],[e])=>t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let e of this.#e.values())e.disabled&&t.add(e.value);return t}#n(t,e){for(let[n,i]of this.#e)if(n.contains(t.target))return e.call(this,i,t)}};var A=class extends v{#t;constructor(t,e){super(t),this.#t=e}#e(t){let{expanded:e,multiple:n}=this.#t.state(),i=Kt({disabled:this.disabled(),expanded:e,multiple:n},t);i!==null&&this.#t.change(i)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,e){let{expanded:n,multiple:i,orientation:a,dir:l}=this.#t.state(),d=this.ordered(),c=d.map(([,u])=>u.value),s=kt({values:c,disabled:this.disabled(),expanded:n,multiple:i,orientation:a,dir:l},t.value,e.key);s&&(e.preventDefault(),s.toggle!==null&&this.#e(s.toggle),s.focus!==null&&d[c.indexOf(s.focus)][0].focus())}};var p=globalThis.HTMLElement??class{};function r(o,t,e){o.getAttribute(t)!==e&&(e===null?o.removeAttribute(t):o.setAttribute(t,e))}var me=new WeakSet;function g(o,t){me.has(o)||(me.add(o),console.error(t,o))}function f(o,t){if(o)for(let[e,n]of t)o.get(e)||o.define(e,n)}function E(o,t,e){return[...o.querySelectorAll(t)].filter(n=>n.closest(e)===o)}var ze=0,m=class extends p{#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}-${++ze}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return E(this,t,this.localName)}announce(t,e){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:e}))}};var Fe="primitiv-accordion",T="primitiv-accordion-item",Ft="primitiv-accordion-trigger",ge="primitiv-accordion-content",fe="primitiv-accordion-trigger-icon";function Ye(o){return(o??"").split(/\s+/).filter(Boolean)}function We(o){return o.childElementCount===1?o.firstElementChild:(g(o,`<${Ft}> needs exactly one element child (a <button>) to decorate.`),null)}var $=class extends m{#t=new Set;#e=!1;controller=new A(this,this.#o());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return Ye(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#o(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#n(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#n(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),e=this.rootId();r(this,"data-orientation",this.#n());let n=[];for(let i of this.parts(T)){let a=i.getAttribute("value");if(a===null){g(i,`<${T}> needs a value, which pairs it with the root's value.`);continue}let l=t.has(a),d=l?"open":"closed",[c]=E(i,Ft,T),[s]=E(i,ge,T),u=c?We(c):null;if(u){let h=c.hasAttribute("disabled");n.push({value:a,element:u,disabled:h}),u.id||(u.id=b(e,"heading",a)),r(u,"aria-expanded",String(l)),r(u,"aria-disabled",String(h)),r(u,"data-disabled",String(h)),r(u,"data-state",d)}if(s){s.id||(s.id=b(e,"panel",a));let h=s.hasAttribute("force-mount");s.hasAttribute("role")||s.setAttribute("role","region"),r(s,"aria-labelledby",u?u.id:null),r(s,"hidden",l||h?null:""),r(s,"aria-hidden",l?null:"true"),r(s,"data-state",d),this.#e&&l&&!this.#t.has(a)&&s.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}u&&r(u,"aria-controls",s?s.id:null);for(let h of E(i,fe,T))r(h,"aria-hidden","true"),r(h,"data-state",d)}this.controller.setTriggers(n),this.#t=t,this.#e=!0}},B=class extends p{},U=class extends p{},q=class extends p{},z=class extends p{};function Yt(o=globalThis.customElements){f(o,[[Fe,$],[T,B],[Ft,U],[ge,q],[fe,z]])}var L=class extends v{#t;constructor(t,e){super(t),this.#t=e}onTriggerClick(t){let e=_({open:this.#t.state().open,disabled:t.disabled});e!==null&&this.#t.change(e)}onTriggerKeydown(t,e){let n=Nt({open:this.#t.state().open,disabled:t.disabled},e.key);n&&(e.preventDefault(),this.#t.change(n.open))}};var je="primitiv-collapsible",Wt="primitiv-collapsible-trigger",ve="primitiv-collapsible-content",be="primitiv-collapsible-trigger-icon",Ve="--primitiv-collapsible-collapsed-height";function Xe(o){return o.childElementCount===1?o.firstElementChild:(g(o,`<${Wt}> needs exactly one element child (a <button>) to decorate.`),null)}function Je(o){return Number.isNaN(Number(o))?o:`${o}px`}function Qe(o,t,e){o.style.getPropertyValue(t)!==e&&(o.style.setProperty(t,e),o.getAttribute("style")===""&&o.removeAttribute("style"))}var F=class extends m{#t;controller=new L(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,e=t?"open":"closed",n=this.hasAttribute("disabled"),i=this.rootId();r(this,"data-state",e),r(this,"data-disabled",String(n));let[a]=this.parts(Wt),[l]=this.parts(ve),d=a?Xe(a):null;if(d&&(d.id||(d.id=`${i}-trigger`),r(d,"aria-expanded",String(t)),r(d,"aria-disabled",n?"true":null),r(d,"data-disabled",String(n)),r(d,"data-state",e)),l){l.id||(l.id=`${i}-content`);let c=l.getAttribute("collapsed-height"),s=c!==null,u=s||l.hasAttribute("force-mount");r(l,"hidden",t||u?null:""),r(l,"aria-hidden",t||s?null:"true"),r(l,"data-state",e),r(l,"data-disabled",String(n)),r(l,"data-clamped",s?"true":null),Qe(l,Ve,s?Je(c):""),t&&this.#t===!1&&l.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}d&&r(d,"aria-controls",l?l.id:null);for(let c of this.parts(be))r(c,"aria-hidden","true"),r(c,"data-state",e);this.controller.setTriggers(d?[{value:"trigger",element:d,disabled:n}]:[]),this.#t=t}},Y=class extends p{},W=class extends p{},j=class extends p{};function jt(o=globalThis.customElements){f(o,[[je,F],[Wt,Y],[ve,W],[be,j]])}var H=class{#t;#e;#o=null;#n=!1;#i="";#r;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",e=>this.#a(e),{signal:t}),this.#t.addEventListener("keydown",e=>this.#s(e),{signal:t}),document.addEventListener("click",e=>this.#l(e),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let e=this.#e.source?.();e?this.#t.showPopover({source:e}):this.#t.showPopover(),this.#t.contains(document.activeElement)||this.#t.querySelector(y)?.focus()}else if(!t&&this.#n){this.#n=!1;try{this.#t.hidePopover()}catch{}}}#a(t){t.newState==="closed"&&(this.#n=!1,this.#e.change(!1))}#s(t){let e=document.activeElement.closest("[popover]")??this.#t,n=[...e.querySelectorAll(y)].filter(d=>d.closest("[popover]")===e),i=n.indexOf(document.activeElement),a=It({key:t.key,active:i,count:n.length});if(a){t.preventDefault(),"focus"in a?n[a.focus].focus():"activate"in a?n[a.activate].click():(this.#e.change(!1),this.#e.trigger()?.focus());return}let l=_t({query:this.#i,key:t.key,labels:n.map(d=>d.textContent),active:i});l&&(this.#i=l.query,clearTimeout(this.#r),this.#r=setTimeout(()=>this.#i="",Gt),l.focus!==null&&(t.preventDefault(),n[l.focus].focus()))}#l(t){if(!this.#e.state().open)return;let e=t.target;this.#e.trigger()?.contains(e)||e.closest("[popover]")||this.#e.change(!1)}};var O=class{#t;#e;#o=null;#n=!1;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",e=>this.#i(e),{signal:t}),this.#t.addEventListener("keydown",e=>this.#r(e),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let e=this.#e.source?.();e?this.#t.showPopover({source:e}):this.#t.showPopover(),this.#t.querySelector(y)?.focus()}else if(!t&&this.#n){this.#n=!1;try{this.#t.hidePopover()}catch{}}}#i(t){t.newState==="closed"&&(this.#n=!1,this.#e.change(!1))}#r(t){t.key===this.#e.closeKey()&&(t.preventDefault(),t.stopPropagation(),this.#e.change(!1),this.#e.trigger()?.focus())}};var Ee="primitiv-dropdown",Te="primitiv-dropdown-trigger",xe="primitiv-dropdown-content",we="primitiv-dropdown-item",x="primitiv-dropdown-checkbox-item",V="primitiv-dropdown-radio-group",R="primitiv-dropdown-radio-item",Ce="primitiv-dropdown-item-indicator",Qt="primitiv-dropdown-group",Zt="primitiv-dropdown-label",Me="primitiv-dropdown-separator",Ze="primitiv-dropdown-sub",Ae="primitiv-dropdown-sub-trigger",Le="primitiv-dropdown-sub-content",ye=`${we},${x},${R}`;function te(o,t){return o.childElementCount===1?o.firstElementChild:(g(o,`<${o.localName}> needs exactly one element child (${t}) to decorate.`),null)}function Vt(o,t,e){return o.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:e}))}function Xt(o){let t=o.getAttribute("checked");return t==="indeterminate"?t:t!==null}function Jt(o){return o.closest(V)?.getAttribute("value")===o.getAttribute("value")}var X=class extends m{#t=null;#e=null;#o=null;#n=null;controller={connect:()=>this.#a(),disconnect:()=>this.#s()};reconcileOn=["open","disabled","checked","value"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#i(){return{state:()=>({open:this.open}),change:t=>this.#r(t),trigger:()=>this.#o,source:()=>this.#o}}#r(t){t!==this.open&&(this.announce("primitiv-dropdown-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#a(){this.#n=new AbortController;let t={signal:this.#n.signal};this.addEventListener("click",e=>this.#p(e),t),this.addEventListener("pointerover",e=>this.#c(e,!0),t),this.addEventListener("pointerout",e=>this.#c(e,!1),t),this.#e?.connect()}#s(){this.#n.abort(),this.#n=null,this.#e?.disconnect()}#l(t){let e=t?.closest(ye)??null;return e?.closest(Ee)===this?e:null}#c(t,e){let n=this.#l(t.target);if(!n||n===this.#l(t.relatedTarget))return;let i=n.firstElementChild;r(i,"data-highlighted",e?"":null)}#p(t){let e=t.target;if(this.#o?.contains(e)){this.#r(!this.open);return}let n=this.#l(e);if(!(!n||n.hasAttribute("disabled"))){if(n.localName===x){let i=Xt(n)!==!0;Vt(n,"primitiv-dropdown-checked-change",{checked:i})&&r(n,"checked",i?"":null)}else if(n.localName===R&&!Jt(n)){let i=n.closest(V),a=n.getAttribute("value");Vt(i,"primitiv-dropdown-value-change",{value:a})&&i.setAttribute("value",a)}Vt(n,"primitiv-dropdown-select",null)&&(this.#r(!1),this.#o?.focus())}}#d(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new H(t,this.#i()):null,this.#e?.connect())}reconcile(){let t=this.open,e=this.rootId(),[n=null]=this.parts(xe),[i]=this.parts(Te);this.#o=i?te(i,"a <button>"):null,n&&(n.id||(n.id=`${e}-content`),r(n,"role","menu"),n.hasAttribute("popover")||n.setAttribute("popover","auto")),this.#o&&(r(this.#o,"aria-haspopup","menu"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",n?n.id:null));for(let l of this.parts(ye)){let d=te(l,"an <li>");if(!d)continue;let c=l.localName===x,s=l.localName===R,u=c?Xt(l):s&&Jt(l);r(d,"role",c?"menuitemcheckbox":s?"menuitemradio":"menuitem"),r(d,"tabindex","-1"),r(d,"aria-disabled",l.hasAttribute("disabled")?"true":null),r(d,"aria-checked",c||s?u==="indeterminate"?"mixed":String(u):null)}for(let l of this.parts(Ce)){let d=l.closest(`${x},${R}`),c=d?.localName===x?Xt(d):d?Jt(d):!1;r(l,"data-state",c==="indeterminate"?c:c?"checked":"unchecked"),r(l,"hidden",c||l.hasAttribute("force-mount")?null:"")}let a=0;for(let l of this.parts(Zt))l.id||(l.id=`${e}-label-${++a}`);for(let l of this.parts(Qt)){let d=[...l.querySelectorAll(Zt)].find(c=>c.closest(Qt)===l);r(l,"role","group"),r(l,"aria-labelledby",d?d.id:null)}for(let l of this.parts(V))r(l,"role","group");for(let l of this.parts(Me))r(l,"role","separator");this.#d(n),this.#e?.sync()}},J=class extends m{#t=null;#e=null;#o=null;#n=null;#i=!1;#r=null;controller={connect:()=>this.#c(),disconnect:()=>this.#p()};reconcileOn=["open","disabled"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#a(){return{state:()=>({open:this.open}),change:t=>this.#s(t),trigger:()=>this.#o,source:()=>this.#o,closeKey:()=>this.direction()==="rtl"?"ArrowRight":"ArrowLeft"}}#s(t){t!==this.open&&(this.announce("primitiv-dropdown-sub-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#l(){return this.#n.hasAttribute("disabled")}#c(){this.#r=new AbortController;let t={signal:this.#r.signal};this.addEventListener("click",e=>this.#d(e)&&this.#u(),t),this.addEventListener("keydown",e=>this.#m(e),t),this.addEventListener("pointerover",e=>this.#h(e,!0),t),this.addEventListener("pointerout",e=>this.#h(e,!1),t),document.addEventListener("pointerover",e=>this.#g(e),t),this.#e?.connect()}#p(){this.#r.abort(),this.#r=null,this.#e?.disconnect()}#d(t){return this.#o?.contains(t.target)??!1}#u(){this.#l()||this.#s(!0)}#m(t){!this.#d(t)||this.#l()||t.key===(this.direction()==="rtl"?"ArrowLeft":"ArrowRight")&&(t.preventDefault(),t.stopPropagation(),this.#s(!0))}#h(t,e){!this.#d(t)||this.#o.contains(t.relatedTarget)||(this.#i=e,this.reconcile(),e&&this.#u())}#g(t){if(!this.open||this.contains(t.target))return;let e=t.target.closest('[role^="menuitem"]');e&&e.closest('[role="menu"]')===this.parentElement.closest('[role="menu"]')&&this.#s(!1)}#f(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new O(t,this.#a()):null,this.#e?.connect())}reconcile(){let t=this.open,[e=null]=this.parts(Le),[n=null]=this.parts(Ae);this.#n=n,this.#o=n?te(n,"an <li>"):null,e&&(e.id||(e.id=`${this.rootId()}-content`),r(e,"role","menu"),e.hasAttribute("popover")||e.setAttribute("popover","auto")),this.#o&&(r(this.#o,"role","menuitem"),r(this.#o,"tabindex","-1"),r(this.#o,"aria-haspopup","menu"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",e?e.id:null),r(this.#o,"aria-disabled",this.#l()?"true":null),r(this.#o,"data-highlighted",this.#i||t?"":null)),this.#f(e),this.#e?.sync()}},Q=class extends p{},Z=class extends p{},tt=class extends p{},et=class extends p{},ot=class extends p{},nt=class extends p{},it=class extends p{},rt=class extends p{},st=class extends p{},lt=class extends p{},at=class extends p{},ct=class extends p{};function ee(o=globalThis.customElements){f(o,[[Ee,X],[Te,Q],[xe,Z],[we,tt],[x,et],[V,ot],[R,nt],[Ce,it],[Qt,rt],[Zt,st],[Me,lt],[Ze,J],[Ae,at],[Le,ct]])}var P=class{#t;#e;#o=null;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o,e=this.#t;e.addEventListener("close",()=>this.#e.change(!1),{signal:t}),e.addEventListener("cancel",n=>this.#n(n),{signal:t}),e.addEventListener("pointerdown",n=>this.#i(n),{signal:t}),e.addEventListener("keydown",n=>this.#r(n),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}sync(){let{open:t}=this.#e.state();t&&!this.#t.open?this.#t.showModal():!t&&this.#t.open&&this.#t.close()}#n(t){this.#e.escapeKeyDown?.(t);let e=t.defaultPrevented;t.preventDefault(),e||this.#e.change(!1)}#i(t){let e={x:t.clientX,y:t.clientY};Bt(this.#t.getBoundingClientRect(),e)&&(this.#e.pointerDownOutside?.(t),t.defaultPrevented||this.#e.change(!1))}#r(t){if(!this.#t.open)return;let e=[...this.#t.querySelectorAll(C)],n=$t({key:t.key,shiftKey:t.shiftKey,active:e.indexOf(document.activeElement),count:e.length});n&&(t.preventDefault(),n.focus!==null&&e[n.focus].focus())}};var to="primitiv-modal",He="primitiv-modal-trigger",ne="primitiv-modal-content",Oe="primitiv-modal-title",Re="primitiv-modal-description",Pe="primitiv-modal-close";function oe(o,t){return o.childElementCount===1?o.firstElementChild:(g(o,`<${o.localName}> needs exactly one element child (${t}) to decorate.`),null)}function eo(o){let t=o.firstElementChild;return o.childElementCount===1&&t instanceof HTMLDialogElement?t:(g(o,`<${ne}> needs exactly one <dialog> child to decorate.`),null)}var dt=class extends m{#t=null;#e=null;#o=[];#n=[];#i=null;controller={connect:()=>this.#s(),disconnect:()=>this.#l()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#r(){return{state:()=>({open:this.open}),change:t=>this.#a(t)}}#a(t){t!==this.open&&(this.announce("primitiv-modal-change",{open:t})?this.open=t:this.#e?.sync())}#s(){this.#i=new AbortController,this.addEventListener("click",t=>this.#c(t),{signal:this.#i.signal}),this.#e?.connect()}#l(){this.#i.abort(),this.#i=null,this.#e?.disconnect(),this.#t&&r(this.#t,"open",null)}#c(t){let e=t.target;this.#o.some(n=>n.contains(e))?this.#a(!0):this.#n.some(n=>n.contains(e))&&this.#a(!1)}#p(t){t!==this.#t&&(this.#e?.disconnect(),t&&r(t,"open",null),this.#t=t,this.#e=t?new P(t,this.#r()):null,this.#e?.connect())}reconcile(){let t=this.open,e=t?"open":"closed",n=this.rootId();r(this,"data-state",e);let[i]=this.parts(ne),a=i?eo(i):null,[l]=this.parts(Oe),d=l?oe(l,"a heading"):null,[c]=this.parts(Re),s=c?oe(c,"a <p>"):null;d&&!d.id&&(d.id=`${n}-title`),s&&!s.id&&(s.id=`${n}-description`),a&&(a.id||(a.id=`${n}-content`),r(a,"data-state",e),r(a,"aria-labelledby",d?d.id:null),r(a,"aria-describedby",s?s.id:null)),this.#o=this.#d(He);for(let u of this.#o)r(u,"aria-haspopup","dialog"),r(u,"aria-expanded",String(t)),r(u,"aria-controls",a?a.id:null);this.#n=this.#d(Pe),this.#p(a),this.#e?.sync()}#d(t){return this.parts(t).flatMap(e=>oe(e,"a <button>")??[])}},pt=class extends p{},ut=class extends p{},ht=class extends p{},mt=class extends p{},gt=class extends p{};function ie(o=globalThis.customElements){f(o,[[to,dt],[He,pt],[ne,ut],[Oe,ht],[Re,mt],[Pe,gt]])}var S=class{#t;#e;#o=null;#n=!1;#i=null;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",e=>this.#l(e),{signal:t}),this.#t.addEventListener("keydown",e=>this.#c(e),{signal:t}),document.addEventListener("click",e=>this.#p(e),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1,this.#a()}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let e=this.#e.source?.();e?this.#t.showPopover({source:e}):this.#t.showPopover(),(this.#t.querySelector(C)??this.#t).focus(),this.#r()}else if(!t&&this.#n){this.#n=!1,this.#a();try{this.#t.hidePopover()}catch{}}}#r(){this.#i=new AbortController;let t={capture:!0,passive:!0,signal:this.#i.signal};window.addEventListener("scroll",()=>this.#s(),t),window.addEventListener("resize",()=>this.#s(),t),this.#s()}#a(){this.#i?.abort(),this.#i=null}#s(){let t=this.#e.source?.()??this.#e.trigger();if(!t)return;let{side:e,align:n}=M(this.#t.getBoundingClientRect(),t.getBoundingClientRect());r(this.#t,"data-side",e),r(this.#t,"data-align",n)}#l(t){t.newState==="closed"&&(this.#n=!1,this.#a(),this.#e.change(!1))}#c(t){t.defaultPrevented||!Ut(t.key)||(t.preventDefault(),this.#e.change(!1),this.#e.trigger()?.focus())}#p(t){let e=t.target;qt({open:this.#e.state().open,nativeLightDismiss:"popover"in HTMLElement.prototype,inTrigger:this.#e.trigger()?.contains(e)??!1,inPopover:e.closest("[popover]")!==null})&&this.#e.change(!1)}};var oo="primitiv-popover",Se="primitiv-popover-trigger",De="primitiv-popover-anchor",Ke="primitiv-popover-content",ke="primitiv-popover-title",Ne="primitiv-popover-description",Ie="primitiv-popover-close";function D(o,t){return o.childElementCount===1?o.firstElementChild:(g(o,`<${o.localName}> needs exactly one element child (${t}) to decorate.`),null)}var ft=class extends m{#t=null;#e=null;#o=null;#n=null;#i=[];#r=null;controller={connect:()=>this.#l(),disconnect:()=>this.#c()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#a(){return{state:()=>({open:this.open}),change:t=>this.#s(t),trigger:()=>this.#o,source:()=>this.#n??this.#o}}#s(t){t!==this.open&&(this.announce("primitiv-popover-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#l(){this.#r=new AbortController,this.addEventListener("click",t=>this.#p(t),{signal:this.#r.signal}),this.#e?.connect()}#c(){this.#r.abort(),this.#r=null,this.#e?.disconnect()}#p(t){let e=t.target;this.#o?.contains(e)?this.#s(!this.open):this.#i.some(n=>n.contains(e))&&this.#s(!1)}#d(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new S(t,this.#a()):null,this.#e?.connect())}reconcile(){let t=this.open,e=t?"open":"closed",n=this.rootId();r(this,"data-state",e);let[i=null]=this.parts(Ke),[a]=this.parts(Se),[l]=this.parts(De),[d]=this.parts(ke),[c]=this.parts(Ne);this.#o=a?D(a,"a <button>"):null,this.#n=l?D(l,"the element to anchor to"):null;let s=d?D(d,"a heading"):null,u=c?D(c,"a <p>"):null;s&&!s.id&&(s.id=`${n}-title`),u&&!u.id&&(u.id=`${n}-description`),i&&(i.id||(i.id=`${n}-content`),r(i,"role","dialog"),i.hasAttribute("popover")||i.setAttribute("popover","auto"),r(i,"tabindex","-1"),r(i,"data-state",e),r(i,"aria-labelledby",s?s.id:null),r(i,"aria-describedby",u?u.id:null)),this.#o&&(r(this.#o,"aria-haspopup","dialog"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",i?i.id:null)),this.#i=this.parts(Ie).flatMap(h=>D(h,"a <button>")??[]),this.#d(i),this.#e?.sync()}},vt=class extends p{},bt=class extends p{},yt=class extends p{},Et=class extends p{},Tt=class extends p{},xt=class extends p{};function re(o=globalThis.customElements){f(o,[[oo,ft],[Se,vt],[De,bt],[Ke,yt],[ke,Et],[Ne,Tt],[Ie,xt]])}var K=class extends v{#t;constructor(t,e){super(t),this.#t=e}onTriggerClick(t){let{active:e}=this.#t.state(),n=G({disabled:this.disabled(),active:e},t.value);if(n!==null){let i=this.ordered().map(([,a])=>a.value);this.#t.activate(n,i.indexOf(n))}}onTriggerKeydown(t,e){let{active:n,orientation:i,dir:a,activationMode:l}=this.#t.state(),d=this.ordered(),c=d.map(([,u])=>u.value),s=Dt({values:c,disabled:this.disabled(),active:n,orientation:i,dir:a,activationMode:l},t.value,e.key);s&&(e.preventDefault(),s.activate!==null&&this.#t.activate(s.activate,c.indexOf(s.activate)),d[c.indexOf(s.focus)][0].focus())}};var no="primitiv-tabs",Ge="primitiv-tabs-list",se="primitiv-tabs-trigger",_e="primitiv-tabs-content";function io(o){let t=o.getAttribute("value");return o.childElementCount===1&&t!==null?{tab:o.firstElementChild,value:t}:(g(o,`<${se}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var wt=class extends m{#t;#e=!1;controller=new K(this,this.#o());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#o(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(t,e)=>{this.announce("primitiv-tabs-change",{value:t,index:e})&&(this.value=t)}}}#n(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#i(),e=this.value,n=this.rootId();r(this,"data-orientation",t);for(let c of this.parts(Ge)){r(c,"role","tablist"),r(c,"aria-orientation",t),r(c,"data-orientation",t);let s=c.getAttribute("label");s!==null&&r(c,"aria-label",s)}let i=new Map;for(let c of this.parts(_e)){let s=c.getAttribute("value");s!==null&&i.set(s,c)}let a=this.parts(se).flatMap(c=>{let s=io(c);return s?[{trigger:c,...s}]:[]}),l=St({values:a.map(c=>c.value),active:e});this.controller.setTriggers(a.map(({trigger:c,tab:s,value:u})=>({value:u,element:s,disabled:c.hasAttribute("disabled")})));for(let{trigger:c,tab:s,value:u}of a){let h=i.get(u),pe=u===e,ue=c.hasAttribute("disabled");s.id||(s.id=b(n,"trigger",u)),h&&!h.id&&(h.id=b(n,"panel",u)),r(s,"role","tab"),r(s,"aria-selected",String(pe)),r(s,"aria-controls",h?h.id:null),r(s,"tabindex",u===l?"0":"-1"),r(s,"aria-disabled",ue?"true":null),r(s,"data-disabled",ue?"":null),r(s,"data-state",pe?"active":"inactive"),r(s,"data-orientation",t),h&&r(h,"aria-labelledby",s.id)}for(let[c,s]of i){let u=c===e;r(s,"role","tabpanel"),r(s,"tabindex","0"),r(s,"hidden",u?null:""),r(s,"data-state",u?"active":"inactive"),r(s,"data-orientation",t)}let d=i.get(e);this.#e&&e!==this.#t&&d&&d.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=e,this.#e=!0}},Ct=class extends p{},Mt=class extends p{},At=class extends p{};function le(o=globalThis.customElements){f(o,[[no,wt],[Ge,Ct],[se,Mt],[_e,At]])}var k=class{#t;#e=null;#o=null;#n=t=>this.#p(t);#i=t=>this.#d(t);#r=null;constructor(t){this.#t=t}openNow(){this.#c(),this.#t.change(!0),this.#t.tooltipGroup().opened()}hoverStart(){let t=zt({groupOpen:this.#t.tooltipGroup().isOpen(),delay:this.#t.delay()});if(t===0){this.openNow();return}this.#e=setTimeout(()=>{this.openNow(),this.#e=null},t)}closeNow(){this.holdOpen(),this.#t.change(!1),this.#t.tooltipGroup().closed()}hoverEnd(){this.#c(),this.#o=setTimeout(()=>{this.#t.change(!1),this.#t.tooltipGroup().closed(),this.#o=null},100)}holdOpen(){this.#o!==null&&(clearTimeout(this.#o),this.#o=null)}sync(){let{open:t}=this.#t.state();t?(document.addEventListener("keydown",this.#n),document.addEventListener("pointerdown",this.#i),this.#r||this.#a()):this.#l()}#a(){this.#r=new AbortController;let t={capture:!0,passive:!0,signal:this.#r.signal};window.addEventListener("scroll",()=>this.#s(),t),window.addEventListener("resize",()=>this.#s(),t),this.#s()}#s(){let t=this.#t.content(),e=this.#t.anchor?.();if(!t||!e)return;let{side:n,align:i}=M(t.getBoundingClientRect(),e.getBoundingClientRect());r(t,"data-side",n),r(t,"data-align",i)}#l(){document.removeEventListener("keydown",this.#n),document.removeEventListener("pointerdown",this.#i),this.#r?.abort(),this.#r=null}disconnect(){this.#c(),this.holdOpen(),this.#l()}#c(){this.#e!==null&&(clearTimeout(this.#e),this.#e=null)}#p(t){t.key==="Escape"&&(this.#t.escapeKeyDown?.(t),t.defaultPrevented||this.closeNow())}#d(t){this.#t.content()?.contains(t.target)||(this.#t.pointerDownOutside?.(t),t.defaultPrevented||this.closeNow())}};var w=class{#t;#e=!1;#o=null;constructor(t){this.#t=t}isOpen(){return this.#e}opened(){this.#o!==null&&(clearTimeout(this.#o),this.#o=null),this.#e=!0}closed(){clearTimeout(this.#o??void 0),this.#o=setTimeout(()=>{this.#e=!1,this.#o=null},this.#t())}dispose(){clearTimeout(this.#o??void 0)}};var ro="primitiv-tooltip",Be="primitiv-tooltip-provider",ce="primitiv-tooltip-trigger",Ue="primitiv-tooltip-content",so="primitiv-tooltip-arrow",$e=700,qe=300;function ae(o,t,e){let n=Number(o.getAttribute(t)??Number.NaN);return Number.isNaN(n)?e:n}var lo=new w(()=>qe),Lt=class extends p{#t;get group(){return this.#t??=new w(()=>ae(this,"skip-delay-duration",qe))}},Ht=class extends m{#t=null;#e=null;#o=null;#n=null;#i=new k(this.#r());controller={connect:()=>{},disconnect:()=>this.#a()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#r(){let t=()=>this.closest(Be);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 ae(this,"delay-duration",e?ae(e,"delay-duration",$e):$e)},tooltipGroup:()=>t()?.group??lo,content:()=>this.#e,anchor:()=>this.#t}}#a(){this.open&&this.#r().tooltipGroup().closed(),this.#n?.abort(),this.#n=null,this.#t=null,this.#e=null,this.#o=null,this.#i.disconnect()}#s(t,e){if(t===this.#t&&e===this.#e)return;this.#n?.abort(),this.#n=new AbortController,this.#t=t,this.#e=e;let n={signal:this.#n.signal},i=this.#i;t?.addEventListener("pointerenter",()=>i.hoverStart(),n),t?.addEventListener("pointerleave",()=>this.hasAttribute("disable-hoverable-content")?i.closeNow():i.hoverEnd(),n),t?.addEventListener("focus",()=>i.openNow(),n),t?.addEventListener("blur",()=>i.closeNow(),n),e?.addEventListener("pointerenter",()=>i.holdOpen(),n),e?.addEventListener("pointerleave",()=>i.closeNow(),n)}reconcile(){let t=this.open,e=t?"open":"closed";r(this,"data-state",e);let[n]=this.parts(ce),[i=null]=this.parts(Ue),a=n?ao(n):null;i&&(i.id||(i.id=`${this.rootId()}-content`),r(i,"role","tooltip"),i.hasAttribute("popover")||i.setAttribute("popover","manual"),r(i,"data-state",e)),a&&(r(a,"aria-describedby",i?i.id:null),r(a,"data-state",e)),this.#s(a,i),this.#l(t?i:null),this.#i.sync()}#l(t){if(t===this.#o)return;if(this.#o)try{this.#o.hidePopover()}catch{}if(this.#o=t,!t)return;let e=t;this.#t?e.showPopover({source:this.#t}):e.showPopover()}};function ao(o){return o.childElementCount===1?o.firstElementChild:(g(o,`<${ce}> needs exactly one element child (a <button>) to decorate.`),null)}var Ot=class extends p{},Rt=class extends p{},Pt=class extends p{};function de(o=globalThis.customElements){f(o,[[ro,Ht],[Be,Lt],[ce,Ot],[Ue,Rt],[so,Pt]])}Yt();jt();ee();ie();re();le();de();export{A as AccordionController,L as CollapsibleController,H as DropdownController,O as DropdownSubController,P as ModalController,S as PopoverController,q as PrimitivAccordionContentElement,$ as PrimitivAccordionElement,B as PrimitivAccordionItemElement,U as PrimitivAccordionTriggerElement,z as PrimitivAccordionTriggerIconElement,W as PrimitivCollapsibleContentElement,F as PrimitivCollapsibleElement,Y as PrimitivCollapsibleTriggerElement,j as PrimitivCollapsibleTriggerIconElement,et as PrimitivDropdownCheckboxItemElement,Z as PrimitivDropdownContentElement,X as PrimitivDropdownElement,rt as PrimitivDropdownGroupElement,tt as PrimitivDropdownItemElement,it as PrimitivDropdownItemIndicatorElement,st as PrimitivDropdownLabelElement,ot as PrimitivDropdownRadioGroupElement,nt as PrimitivDropdownRadioItemElement,lt as PrimitivDropdownSeparatorElement,ct as PrimitivDropdownSubContentElement,J as PrimitivDropdownSubElement,at as PrimitivDropdownSubTriggerElement,Q as PrimitivDropdownTriggerElement,gt as PrimitivModalCloseElement,ut as PrimitivModalContentElement,mt as PrimitivModalDescriptionElement,dt as PrimitivModalElement,ht as PrimitivModalTitleElement,pt as PrimitivModalTriggerElement,bt as PrimitivPopoverAnchorElement,xt as PrimitivPopoverCloseElement,yt as PrimitivPopoverContentElement,Tt as PrimitivPopoverDescriptionElement,ft as PrimitivPopoverElement,Et as PrimitivPopoverTitleElement,vt as PrimitivPopoverTriggerElement,At as PrimitivTabsContentElement,wt as PrimitivTabsElement,Ct as PrimitivTabsListElement,Mt as PrimitivTabsTriggerElement,Pt as PrimitivTooltipArrowElement,Rt as PrimitivTooltipContentElement,Ht as PrimitivTooltipElement,Lt as PrimitivTooltipProviderElement,Ot as PrimitivTooltipTriggerElement,K as TabsController,k as TooltipController,w as TooltipGroup,Yt as defineAccordion,jt as defineCollapsible,ee as defineDropdown,ie as defineModal,re as definePopover,le as defineTabs,de as defineTooltip};

package/dist/tags.d.ts

@@ -14,6 +14,7 @@
  */
 import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "./accordion/elements.js";
 import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "./collapsible/elements.js";
+import type { PrimitivDropdownCheckboxItemElement, PrimitivDropdownContentElement, PrimitivDropdownElement, PrimitivDropdownGroupElement, PrimitivDropdownItemElement, PrimitivDropdownItemIndicatorElement, PrimitivDropdownLabelElement, PrimitivDropdownRadioGroupElement, PrimitivDropdownRadioItemElement, PrimitivDropdownSeparatorElement, PrimitivDropdownSubContentElement, PrimitivDropdownSubElement, PrimitivDropdownSubTriggerElement, PrimitivDropdownTriggerElement } from "./dropdown/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";
@@ -46,6 +47,20 @@ declare global {
         "primitiv-tabs-list": PrimitivTabsListElement;
         "primitiv-tabs-trigger": PrimitivTabsTriggerElement;
         "primitiv-tabs-content": PrimitivTabsContentElement;
+        "primitiv-dropdown": PrimitivDropdownElement;
+        "primitiv-dropdown-trigger": PrimitivDropdownTriggerElement;
+        "primitiv-dropdown-content": PrimitivDropdownContentElement;
+        "primitiv-dropdown-item": PrimitivDropdownItemElement;
+        "primitiv-dropdown-checkbox-item": PrimitivDropdownCheckboxItemElement;
+        "primitiv-dropdown-radio-group": PrimitivDropdownRadioGroupElement;
+        "primitiv-dropdown-radio-item": PrimitivDropdownRadioItemElement;
+        "primitiv-dropdown-item-indicator": PrimitivDropdownItemIndicatorElement;
+        "primitiv-dropdown-group": PrimitivDropdownGroupElement;
+        "primitiv-dropdown-label": PrimitivDropdownLabelElement;
+        "primitiv-dropdown-separator": PrimitivDropdownSeparatorElement;
+        "primitiv-dropdown-sub": PrimitivDropdownSubElement;
+        "primitiv-dropdown-sub-trigger": PrimitivDropdownSubTriggerElement;
+        "primitiv-dropdown-sub-content": PrimitivDropdownSubContentElement;
         "primitiv-tooltip": PrimitivTooltipElement;
         "primitiv-tooltip-provider": PrimitivTooltipProviderElement;
         "primitiv-tooltip-trigger": PrimitivTooltipTriggerElement;

package/dist/tooltip/TooltipController.d.ts

@@ -23,6 +23,11 @@ export type TooltipControllerHost = {
     tooltipGroup(): TooltipGroup;
     /** The tooltip's content, so a press inside it is not a press outside. */
     content(): HTMLElement | null;
+    /**
+     * The element the tooltip is anchored to, to measure which side of it the
+     * tooltip landed on. Optional: without it no placement is marked.
+     */
+    anchor?(): HTMLElement | null;
     /** Escape was pressed while open. Call `preventDefault()` on `event` to keep it open. Optional. */
     escapeKeyDown?(event: KeyboardEvent): void;
     /** A pointer went down outside the content while open. Call `preventDefault()` to keep it open. Optional. */
@@ -44,7 +49,10 @@ export type TooltipControllerHost = {
  * - {@link TooltipController.openNow | `openNow`} / {@link TooltipController.closeNow | `closeNow`} —
  *   focus and blur, Escape on the trigger, the pointer leaving the content.
  * - {@link TooltipController.sync | `sync`} — listen for Escape and outside
- *   presses while open; a host calls it whenever the state may have changed.
+ *   presses while open, and mark the tooltip's `data-side` and `data-align`
+ *   (where it landed against its anchor, after any flip) as it opens and on
+ *   every scroll and resize; a host calls it whenever the state may have
+ *   changed, after showing the tooltip.
  */
 export declare class TooltipController {
     #private;

package/dist/tooltip/TooltipController.js

@@ -1,4 +1,5 @@
-import { TOOLTIP_GRACE_MS, tooltipOpenDelay } from "@primitiv-ui/core";
+import { panelPlacement, TOOLTIP_GRACE_MS, tooltipOpenDelay } from "@primitiv-ui/core";
+import { write } from "../internal/element.js";
 /**
  * The behaviour of a tooltip: hover intent and dismissal. Its host wires the
  * trigger's and the content's own events to the intents below, so the React
@@ -15,7 +16,10 @@ import { TOOLTIP_GRACE_MS, tooltipOpenDelay } from "@primitiv-ui/core";
  * - {@link TooltipController.openNow | `openNow`} / {@link TooltipController.closeNow | `closeNow`} —
  *   focus and blur, Escape on the trigger, the pointer leaving the content.
  * - {@link TooltipController.sync | `sync`} — listen for Escape and outside
- *   presses while open; a host calls it whenever the state may have changed.
+ *   presses while open, and mark the tooltip's `data-side` and `data-align`
+ *   (where it landed against its anchor, after any flip) as it opens and on
+ *   every scroll and resize; a host calls it whenever the state may have
+ *   changed, after showing the tooltip.
  */
 export class TooltipController {
     #host;
@@ -26,6 +30,8 @@ export class TooltipController {
     // function twice is a no-op, so syncing open again never stacks them.
     #onKeydown = (event) => this.#keydown(event);
     #onPointerdown = (event) => this.#pointerdown(event);
+    /** The scroll and resize listeners that re-measure the placement, while open. */
+    #following = null;
     constructor(host) {
         this.#host = host;
     }
@@ -76,14 +82,42 @@ export class TooltipController {
         if (open) {
             document.addEventListener("keydown", this.#onKeydown);
             document.addEventListener("pointerdown", this.#onPointerdown);
+            if (!this.#following)
+                this.#follow();
         }
         else {
             this.#stopListening();
         }
     }
+    /** Measure the placement now, and again on every scroll and resize until it closes. */
+    #follow() {
+        this.#following = new AbortController();
+        const options = {
+            // A scroll inside an overflow pane does not bubble to the window.
+            capture: true,
+            // Stryker disable next-line BooleanLiteral: equivalent — passive only spares the scroll from waiting on the listener.
+            passive: true,
+            signal: this.#following.signal,
+        };
+        window.addEventListener("scroll", () => this.#place(), options);
+        window.addEventListener("resize", () => this.#place(), options);
+        this.#place();
+    }
+    /** Mark the side and alignment the tooltip landed on, against its anchor. */
+    #place() {
+        const content = this.#host.content();
+        const anchor = this.#host.anchor?.();
+        if (!content || !anchor)
+            return;
+        const { side, align } = panelPlacement(content.getBoundingClientRect(), anchor.getBoundingClientRect());
+        write(content, "data-side", side);
+        write(content, "data-align", align);
+    }
     #stopListening() {
         document.removeEventListener("keydown", this.#onKeydown);
         document.removeEventListener("pointerdown", this.#onPointerdown);
+        this.#following?.abort();
+        this.#following = null;
     }
     /** Cancel every timer and stop listening, so nothing outlives the host. */
     disconnect() {

package/dist/tooltip/elements.js

@@ -93,6 +93,7 @@ export class PrimitivTooltipElement extends PrimitivRootElement {
             },
             tooltipGroup: () => provider()?.group ?? documentGroup,
             content: () => this.#content,
+            anchor: () => this.#trigger,
         };
     }
     #disconnect() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/web",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "description": "Primitiv's headless components as standard custom elements: light DOM, no framework, no runtime dependencies. Works in plain HTML, server-rendered stacks, React, Vue, Angular and anything else that renders HTML.",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,6 +18,10 @@
       "types": "./dist/collapsible/index.d.ts",
       "default": "./dist/collapsible/index.js"
     },
+    "./dropdown": {
+      "types": "./dist/dropdown/index.d.ts",
+      "default": "./dist/dropdown/index.js"
+    },
     "./modal": {
       "types": "./dist/modal/index.d.ts",
       "default": "./dist/modal/index.js"
@@ -46,6 +50,10 @@
       "types": "./dist/define/collapsible.d.ts",
       "default": "./dist/define/collapsible.js"
     },
+    "./define/dropdown": {
+      "types": "./dist/define/dropdown.d.ts",
+      "default": "./dist/define/dropdown.js"
+    },
     "./define/modal": {
       "types": "./dist/define/modal.d.ts",
       "default": "./dist/define/modal.js"
@@ -92,7 +100,7 @@
     "directory": "packages/web"
   },
   "dependencies": {
-    "@primitiv-ui/core": "0.1.56"
+    "@primitiv-ui/core": "0.1.57"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",