vue-composable-ui 0.0.1 → 1.0.1

package/dist/composable-ui.umd.cjs

@@ -0,0 +1 @@
+(function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k["Vue Composable UI"]={},k.Vue))})(this,function(k,e){"use strict";function j(i){return typeof i=="string"?e.ref(document.querySelector(i)||void 0):i instanceof HTMLElement?e.ref(i):i}function T(i,t,{direction:o="down",align:n="left",position:r="fixed",closeOnOutsideClick:l=!0,closeOnInsideClick:u=!1}={}){const a=e.ref(!1);function c(){const p=j(i);if(!p.value)throw new Error("Activator element is undefined");return p.value}function d(){const p=j(t);if(!p.value)throw new Error("Popover element is undefined");return p.value}function b({focus:p=!0}={}){a.value=!0,p&&e.nextTick(()=>{d().focus()})}function v({focus:p=!0}={}){a.value=!1,p&&c().focus()}function f(p){a.value?v(p):b(p)}function h(){if(!a.value)return;const p=c(),$=d();$.style.position=r;const{top:A,right:s,bottom:m,left:w,width:_,height:I}=p.getBoundingClientRect(),B=$.offsetHeight,V=$.offsetWidth,L=document.documentElement.clientHeight,K=document.documentElement.clientWidth;let O=o;o=="up"?A-B<0&&(O="down"):o=="down"?m+B>L&&(O="up"):o=="right"?s+V>K&&(O="left"):o=="left"&&w-V<0&&(O="right");let S=n;n=="left"?w+V>K&&(S="right"):n=="right"?s-V<0&&(S="left"):n=="top"?A+B>L&&(S="bottom"):n=="bottom"&&m-B<0&&(S="top");const C={top:"auto",bottom:"auto",left:"auto",right:"auto",width:"auto"},M=r==="fixed";O=="up"?C.bottom=`${I+(M?L-m:0)}px`:O=="down"?C.top=`${I+(M?A:0)}px`:O=="right"?C.left=`${_+(M?w:0)}px`:O=="left"&&(C.right=`${_+(M?K-s:0)}px`),["up","down"].includes(O)?S=="right"?C.right=`${M?K-s:0}px`:S=="left"||S=="stretch"?C.left=`${M?w:0}px`:S=="center"&&(C.left=`${(M?w:0)-(V-_)/2}px`):S=="bottom"?C.bottom=`${M?L-m:0}px`:S=="top"?C.top=`${M?A:0}px`:S=="center"&&(C.top=`${(M?A:0)-(B-I)/2}px`),["up","down"].includes(O)&&S==="stretch"&&(C.width=_+"px");for(const W in C)$.style[W]=C[W]}e.watch(a,p=>{p&&e.nextTick(()=>{h()})},{flush:"pre"});function E(p){const $=p.target;if(!c().contains($))try{d().contains($)?u&&v():l&&(a.value=!1)}catch{}}const g=new ResizeObserver(h),y=new AbortController;return e.onMounted(()=>{window.addEventListener("resize",h,{passive:!0,signal:y.signal}),window.addEventListener("scroll",h,{passive:!0,signal:y.signal}),window.addEventListener("click",E,{passive:!0,signal:y.signal}),g.observe(c())}),e.onBeforeUnmount(()=>{y.abort(),g.disconnect()}),{isOpen:a,open:b,close:v,toggle:f}}const U=Symbol();function R(i,t){const[o,n]=[e.unref(i),e.unref(t)];return typeof o=="object"?typeof n=="object"?JSON.stringify(o)===JSON.stringify(n):!1:o===n}function D(i){let t=0;const o=e.shallowRef([]),n=e.ref(),r=e.computed(()=>Array.isArray(i.value));function l(s){const m=o.value.find(w=>w.id===s);if(!m)throw new Error(`Item not found: (${s})`);return m}function u(s){const m=e.unref(s.element);if(m)return m.focus(),m}function a(s,{focus:m=!1}={}){n.value=(s==null?void 0:s.id)??void 0,s!==void 0&&m&&u(s)}function c(s,{focus:m=!1}={}){const w=l(s);return a(w,{focus:m})}function d(s){return n.value===s}function b(s,m,w=!1){const _=j(s),I=t++;return o.value.push({id:I,value:m,element:_,disabled:w}),e.triggerRef(o),I}function v(s){d(s)&&a();const m=l(s),w=o.value.indexOf(m);o.value.splice(w,1),e.triggerRef(o)}function f(s){const m=l(s);if(e.unref(m.disabled))return;const w=e.unref(m.value);if(w!==void 0){if(e.unref(r)){const _=i.value.findIndex(I=>R(w,I));_>-1?i.value.splice(_,1):i.value=[...i.value,w]}else i.value=w;a(m)}}function h(s){return e.unref(r)?!!i.value.find(m=>R(s.value,m)):R(i,s.value)}function E(s){try{const m=l(s);return h(m)}catch{return!1}}function g({focus:s=!1}={}){for(let m of o.value)if(h(m))return a(m,{focus:s})}function y({focus:s=!1}={}){if(o.value.length)return a(o.value[0],{focus:s})}function p({focus:s=!1}={}){if(o.value.length)return a(o.value[o.value.length-1],{focus:s})}function $({focus:s=!1,loop:m=!1}={}){if(n.value===void 0)return y({focus:s});const w=l(n.value),_=o.value.indexOf(w);let I;if(_+1<o.value.length)I=o.value[_+1];else if(m)I=o.value[0];else return;return a(I,{focus:s})}function A({focus:s=!1,loop:m=!1}={}){if(n.value===void 0)return p({focus:s});const w=l(n.value),_=o.value.indexOf(w);let I;if(_-1>-1)I=o.value[_-1];else if(m)I=o.value[o.value.length-1];else return;return a(I,{focus:s})}return e.provide(U,{value:e.readonly(i),selectItem:f,activateItem:c,isSelected:E,isActive:d,addItem:b,removeItem:v}),{items:e.shallowReadonly(o),isMultiselectable:e.readonly(r),activeItem:e.computed(()=>n.value!==void 0?l(n.value):void 0),selectActiveItem:()=>{n.value!==void 0&&f(n.value)},activateSelectedItem:g,activateFirstItem:y,activateLastItem:p,activateNextItem:$,activatePrevItem:A}}function P(i,t,o){const n=e.inject(U);if(!n)throw new Error("List injectable context is not provided");const r=e.ref(-1),l=e.computed(()=>n.isSelected(r.value)),u=e.computed(()=>n.isActive(r.value));function a(){n.selectItem(r.value)}function c({focus:d=!0}={}){e.unref(o)||n.activateItem(r.value,{focus:d})}return e.onBeforeMount(()=>{r.value=n.addItem(i,t,o)}),e.onBeforeUnmount(()=>{n.removeItem(r.value)}),{isSelected:l,isActive:u,select:a,activate:c}}function J(i,t=[],o=!0){const n=e.ref(!1),r=e.ref(!0),l=e.ref(),u=e.ref("");let a,c;function d(){a==null||a.focus()}function b(){r.value=a.validity.valid,l.value=a.validity,u.value=a.validationMessage}function v(){if(!a)throw new Error("Form element is undefined");if(a.setCustomValidity(""),a.validity.valid){const g=a.value;for(const y of e.unref(t)){const p=y(g);if(p!==!0){a.setCustomValidity(p);break}}}return b(),r.value}function f(g){b(),e.unref(o)||g.preventDefault()}function h(){v(),n.value=c!==a.value}let E=new AbortController;return e.onMounted(()=>{if(a=j(i).value,!a)throw new Error("Form element is undefined");c=a.value,a.addEventListener("change",h,{signal:E.signal,passive:!0}),a.addEventListener("invalid",f,{signal:E.signal}),a!=null&&a.autofocus&&d()}),e.onBeforeUnmount(()=>{E.abort()}),{focus:d,validate:v,isValid:r,validity:e.readonly(l),validationMessage:e.readonly(u),isChanged:n}}let G=0;function x(i="id"){return`${i}-${++G}`}const N=Symbol(),z=Symbol(),H=Symbol(),F=Symbol(),Q=["aria-activedescendant","aria-orientation","aria-multiselectable"],X=e.defineComponent({__name:"listbox",props:e.mergeModels({orientation:{default:"vertical"},loop:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(i){const t=i,o=e.useModel(i,"modelValue"),{isMultiselectable:n,activeItem:r,selectActiveItem:l,activateFirstItem:u,activateLastItem:a,activateNextItem:c,activatePrevItem:d}=D(o),b=e.computed(()=>{var f,h;return(h=(f=r.value)==null?void 0:f.element.value)==null?void 0:h.id});function v(f){switch(f.code){case"Space":l();break;case"ArrowUp":if(t.orientation==="horizontal")return;d({focus:!1,loop:t.loop}),n.value||l();break;case"ArrowDown":if(t.orientation==="horizontal")return;c({focus:!1,loop:t.loop}),n.value||l();break;case"ArrowLeft":if(t.orientation==="vertical")return;d({focus:!1,loop:t.loop}),n.value||l();break;case"ArrowRight":if(t.orientation==="vertical")return;c({focus:!1,loop:t.loop}),n.value||l();break;case"Home":u({focus:!1});break;case"End":a({focus:!1});break;default:return}f.preventDefault()}return(f,h)=>(e.openBlock(),e.createElementBlock("div",{onKeydown:v,"aria-activedescendant":b.value,"aria-orientation":f.orientation,"aria-multiselectable":e.unref(n),role:"listbox",tabindex:"0"},[e.renderSlot(f.$slots,"default")],40,Q))}}),Y=["id","aria-disabled","aria-selected","data-active"],Z=e.defineComponent({__name:"listboxOption",props:{id:{},value:{},disabled:{type:Boolean}},setup(i){const t=i,o=t.id??x("list-option"),n=e.ref(),{isSelected:r,isActive:l,select:u}=P(n,t.value,t.disabled);return(a,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"itemEl",ref:n,id:e.unref(o),onClick:c[0]||(c[0]=(...d)=>e.unref(u)&&e.unref(u)(...d)),"aria-disabled":a.disabled,"aria-selected":e.unref(r),"data-active":e.unref(l),role:"option",tabindex:"-1"},[e.renderSlot(a.$slots,"default",{isSelected:e.unref(r),isActive:e.unref(l)})],8,Y))}}),ee=e.defineComponent({__name:"tabContainer",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(i){const t=e.useModel(i,"modelValue"),{items:o,selectActiveItem:n,activateFirstItem:r,activateLastItem:l,activateNextItem:u,activatePrevItem:a}=D(t);return e.provide(N,{getIds:c=>e.computed(()=>{var b,v;const d=o.value.find(f=>f.value===c);return{tabId:((b=d==null?void 0:d.element.value)==null?void 0:b.getAttribute("id"))||void 0,panelId:((v=d==null?void 0:d.element.value)==null?void 0:v.getAttribute("aria-controls"))||void 0}}),selectActiveItem:n,activateFirstItem:r,activateLastItem:l,activateNextItem:u,activatePrevItem:a}),(c,d)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(c.$slots,"default")]))}}),te=["aria-orientation"],oe=e.defineComponent({__name:"tabList",props:{orientation:{default:"horizontal"}},setup(i){const t=i,o=e.inject(N);if(!o)throw new Error("Tabs injectable context is not provided");function n(r){switch(r.code){case"ArrowUp":t.orientation==="vertical"&&o.activatePrevItem({focus:!0,loop:!0});break;case"ArrowDown":t.orientation==="vertical"&&o.activateNextItem({focus:!0,loop:!0});break;case"ArrowLeft":t.orientation==="horizontal"&&o.activatePrevItem({focus:!0,loop:!0});break;case"ArrowRight":t.orientation==="horizontal"&&o.activateNextItem({focus:!0,loop:!0});break;case"Home":o.activateFirstItem({focus:!0});break;case"End":o.activateLastItem({focus:!0});break;default:return}o.selectActiveItem(),r.preventDefault()}return(r,l)=>(e.openBlock(),e.createElementBlock("div",{onKeydown:n,"aria-orientation":t.orientation,role:"tablist"},[e.renderSlot(r.$slots,"default")],40,te))}}),ne=["id","aria-selected","aria-controls","tabindex"],ae=e.defineComponent({__name:"tab",props:{id:{},ariaControls:{},value:{}},setup(i){const t=i,o=e.ref(),{isSelected:n,select:r}=P(o,t.value),l=t.id??x("tab"),u=t.ariaControls??x("tab-panel");return(a,c)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"tab",ref:o,onClick:c[0]||(c[0]=(...d)=>e.unref(r)&&e.unref(r)(...d)),id:e.unref(l),"aria-selected":e.unref(n),"aria-controls":e.unref(u),tabindex:e.unref(n)?0:-1,role:"tab"},[e.renderSlot(a.$slots,"default")],8,ne))}}),ie=["id","aria-labelledby"],re=e.defineComponent({__name:"tabPanel",props:{value:{}},setup(i){const t=i,o=e.inject(U);if(!o)throw new Error("List injectable context is not provided");const n=e.inject(N);if(!n)throw new Error("Tabs injectable context is not provided");const r=e.computed(()=>t.value===o.value.value),l=n.getIds(t.value);return(u,a)=>r.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:e.unref(l).panelId,"aria-labelledby":e.unref(l).tabId,tabindex:"0",role:"tabpanel"},[e.renderSlot(u.$slots,"default")],8,ie)):e.createCommentVNode("",!0)}}),le=e.defineComponent({__name:"popover",props:{id:{},activatorId:{},direction:{default:"down"},align:{default:"left"},position:{default:"fixed"},closeOnOutsideClick:{type:Boolean,default:!0},closeOnInsideClick:{type:Boolean,default:!1},role:{default:"dialog"}},setup(i){const t=i,o=t.id??x("popover"),n=t.activatorId??x("popover-activator"),{isOpen:r,toggle:l,open:u,close:a}=T(`#${n}`,`#${o}`,{direction:t.direction,align:t.align,position:t.position,closeOnOutsideClick:t.closeOnOutsideClick,closeOnInsideClick:t.closeOnInsideClick}),c=e.computed(()=>({id:n,"aria-controls":r.value?t.id:void 0,"aria-haspopup":t.role,"aria-expanded":r.value}));return e.provide(z,{popoverId:o,activatorId:n,role:t.role,isOpen:r,close:a}),(d,b)=>e.renderSlot(d.$slots,"default",{attrs:c.value,isOpen:e.unref(r),toggle:e.unref(l),open:e.unref(u),close:e.unref(a)})}}),se=["id","role","aria-labelledby"],ce=e.defineComponent({__name:"popoverDialog",setup(i){const t=e.inject(z);if(!t)throw new Error("Popover injectable context is not provided");function o(n){switch(n.code){case"Escape":t.close();break;default:return}n.preventDefault()}return(n,r)=>e.unref(t).isOpen.value?(e.openBlock(),e.createElementBlock("div",{key:0,onKeydown:o,id:e.unref(t).popoverId,role:e.unref(t).role,"aria-labelledby":e.unref(t).activatorId,tabindex:"-1"},[e.renderSlot(n.$slots,"default")],40,se)):e.createCommentVNode("",!0)}}),de=["id"],fe=e.defineComponent({inheritAttrs:!1,__name:"tooltip",props:{id:{},text:{},delay:{},direction:{default:"up"}},setup(i){const t=i,o=e.useSlots(),n=e.ref();let r;const l=t.id??x("tooltip"),{isOpen:u}=T(`[aria-describedby=${l}]`,n,{direction:t.direction,align:"center"});function a(){r=setTimeout(()=>{u.value=!0},typeof t.delay=="string"?parseInt(t.delay):t.delay)}function c(){u.value=!1,clearTimeout(r)}function d(f){f.key==="Escape"&&c()}const b={"aria-describedby":l,onmouseenter:a,onmouseleave:c,onfocus:a,onblur:c,onkeydown:d},v=new AbortController;return e.onMounted(()=>{if(o.default)return;const f=document.querySelector(`[aria-describedby=${l}]`);if(!f)throw new Error(`Tooltip activator not found: ${l}`);f.addEventListener("mouseenter",a,{signal:v.signal,passive:!0}),f.addEventListener("mouseleave",c,{signal:v.signal,passive:!0}),f.addEventListener("focus",a,{signal:v.signal,passive:!0}),f.addEventListener("blur",c,{signal:v.signal,passive:!0}),f.addEventListener("keydown",d,{signal:v.signal,passive:!0})}),e.onBeforeUnmount(()=>{v.abort()}),(f,h)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(f.$slots,"default",{attrs:b}),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(u)?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,ref_key:"popupEl",ref:n,id:e.unref(l)},f.$attrs,{role:"tooltip"}),[e.renderSlot(f.$slots,"content",{},()=>[e.createTextVNode(e.toDisplayString(f.text),1)])],16,de)):e.createCommentVNode("",!0)]))],64))}}),ue=e.defineComponent({__name:"menu",props:e.mergeModels({id:{},activatorId:{},direction:{default:"down"},align:{default:"left"},position:{default:"fixed"}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(i){const t=i,o=t.id??x("menu"),n=t.activatorId??x("menu-activator"),r=e.useModel(i,"modelValue"),{isMultiselectable:l,activeItem:u,activateFirstItem:a,activateLastItem:c,activateNextItem:d,activatePrevItem:b}=D(r),{isOpen:v,toggle:f,open:h,close:E}=T(`#${n}`,`#${o}`,{direction:t.direction,align:t.align,position:t.position,closeOnOutsideClick:!0,closeOnInsideClick:!1});function g(p){switch(p.code){case"Space":case"Enter":f(),v.value&&e.nextTick(a);break;case"ArrowUp":h(),e.nextTick(c);break;case"ArrowDown":h(),e.nextTick(a);break;default:return}p.preventDefault()}const y=e.computed(()=>({id:n,"aria-controls":v.value?o:void 0,"aria-haspopup":"menu","aria-expanded":v.value,onclick:f,onkeydown:g,tabindex:0}));return e.provide(H,{menuId:o,activatorId:n,isOpen:v,close:E,isMultiselectable:l,activeItemId:e.computed(()=>{var p,$;return($=(p=u.value)==null?void 0:p.element.value)==null?void 0:$.id}),activateFirstItem:a,activateLastItem:c,activateNextItem:d,activatePrevItem:b}),(p,$)=>e.renderSlot(p.$slots,"default",{attrs:y.value})}}),pe=["id","aria-activedescendant","aria-labelledby"],me=e.defineComponent({__name:"menuItems",setup(i){const t=e.inject(H);if(!t)throw new Error("Menu injectable context is not provided");function o(n){switch(n.code){case"ArrowUp":t.activatePrevItem({focus:!0,loop:!1});break;case"ArrowDown":t.activateNextItem({focus:!0,loop:!1});break;case"Home":t.activateFirstItem({focus:!0});break;case"End":t.activateLastItem({focus:!0});break;case"Escape":t.close();break;case"Tab":t.isOpen.value=!1;return;default:return}n.preventDefault()}return(n,r)=>e.unref(t).isOpen.value?(e.openBlock(),e.createElementBlock("div",{key:0,onKeydown:o,id:e.unref(t).menuId,"aria-activedescendant":e.unref(t).activeItemId.value,"aria-labelledby":e.unref(t).activatorId,role:"menu",tabindex:"-1"},[e.renderSlot(n.$slots,"default")],40,pe)):e.createCommentVNode("",!0)}}),be=["id","data-active","role","aria-checked","aria-disabled"],ve=e.defineComponent({__name:"menuItem",props:{id:{},value:{},disabled:{type:Boolean}},emits:["select"],setup(i,{emit:t}){const o=i,n=t,r=o.id??x("menu-item"),l=e.ref(),{isSelected:u,isActive:a,select:c,activate:d}=P(l,o.value,o.disabled),b=e.inject(H);if(!b)throw new Error("Menu injectable context is not provided");const v=e.computed(()=>o.value!==void 0?b.isMultiselectable.value?"menuitemcheckbox":"menuitemradio":"menuitem");function f(){c(),n("select",o.value)}function h(){f(),(o.value===void 0||!(b!=null&&b.isMultiselectable.value))&&b.close()}function E(g){switch(g.code){case"Space":f(),o.value===void 0&&b.close();break;case"Enter":f(),b.close();break;default:return}g.preventDefault()}return(g,y)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"itemEl",ref:l,id:e.unref(r),onClick:h,onKeydown:E,onMouseenter:y[0]||(y[0]=p=>e.unref(d)({focus:!1})),"data-active":e.unref(a),role:v.value,"aria-checked":g.value!==void 0?e.unref(u):void 0,"aria-disabled":g.disabled||void 0,tabindex:"-1"},[e.renderSlot(g.$slots,"default",{isSelected:e.unref(u),isActive:e.unref(a)})],40,be))}}),ke=["name","value"],q=e.defineComponent({__name:"comboboxHiddenInput",props:{name:{},value:{}},setup(i){const t=i,o=e.computed(()=>{if(typeof t.value=="object"){const n={};for(const[r,l]of Object.entries(t.value))n[`${t.name}[${r}]`]=l;return n}else return{[t.name]:t.value}});return(n,r)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(l,u)=>(e.openBlock(),e.createElementBlock("input",{name:u,value:l,type:"hidden"},null,8,ke))),256))}}),Ie=e.defineComponent({inheritAttrs:!1,__name:"combobox",props:e.mergeModels({displayValue:{type:Function,default:i=>Array.isArray(i)?i.map(t=>t.toString()).join(", "):i.toString()},id:{},activatorId:{},name:{},formValue:{type:Function,default:i=>i}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(i){const t=i,o=e.computed(()=>h.value?n.value.map(I=>t.formValue(I)):t.formValue(n.value)),n=e.useModel(i,"modelValue"),r=t.id??x("combobox"),l=t.activatorId??r,u=`${r}-popover`,{isOpen:a,toggle:c,open:d,close:b}=T(`#${l}`,`#${u}`,{direction:"down",align:"stretch",position:"fixed",closeOnOutsideClick:!0,closeOnInsideClick:!1}),{items:v,activeItem:f,isMultiselectable:h,selectActiveItem:E,activateSelectedItem:g,activateFirstItem:y,activateLastItem:p,activateNextItem:$,activatePrevItem:A}=D(n),s=e.computed(()=>t.displayValue(n.value));e.watch(v,()=>{!f.value&&v.value.length&&(g({focus:!1}),f.value||y({focus:!1}))});function m(){var B;(B=j(`#${l}`).value)==null||B.focus()}function w(I){if(a.value)switch(I.code){case"Space":E(),h.value||b({focus:!0});break;case"Enter":E(),b({focus:!0});break;case"Tab":E(),b({focus:!0});return;case"ArrowUp":A({focus:!1,loop:!1});break;case"ArrowDown":$({focus:!1,loop:!1});break;case"Home":y({focus:!1});break;case"End":p({focus:!1});break;case"Escape":b({focus:!0});break;default:return}else switch(I.code){case"Space":case"Enter":d({focus:!1});break;case"End":case"ArrowUp":d({focus:!1}),e.nextTick(()=>p({focus:!1}));break;case"Home":case"ArrowDown":d({focus:!1}),e.nextTick(()=>y({focus:!1}));break;default:return}I.preventDefault()}const _=e.computed(()=>{var I,B;return{onkeydown:w,onclick:()=>d({focus:!1}),id:r,"aria-controls":a.value?u:void 0,"aria-expanded":a.value,"aria-activedescendant":(B=(I=f.value)==null?void 0:I.element.value)==null?void 0:B.id,"aria-haspopup":"listbox",role:"combobox"}});return e.provide(F,{displayValue:s,popoverId:u,isOpen:a,open:d,close:b,focus:m,isMultiselectable:h,activatorAttrs:_}),(I,B)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[I.name?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(h)?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(o.value,(V,L)=>(e.openBlock(),e.createBlock(q,{name:`${I.name}[${L}]`,value:V},null,8,["name","value"]))),256)):(e.openBlock(),e.createBlock(q,{key:1,name:I.name,value:o.value},null,8,["name","value"]))],64)):e.createCommentVNode("",!0),e.renderSlot(I.$slots,"default",{popoverId:u,isOpen:e.unref(a),toggle:e.unref(c),displayValue:s.value,attrs:_.value})],64))}}),he=e.defineComponent({__name:"comboboxInput",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(i){const t=e.inject(F);if(!t)throw new Error("Combobox injectable context is not provided");const o=e.useModel(i,"modelValue");function n(){o.value=t.displayValue.value}e.watch(t.displayValue,n,{immediate:!0});const r=e.computed(()=>({oninput:()=>t.open({focus:!0}),onchange:n,...t.activatorAttrs.value}));return(l,u)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":u[0]||(u[0]=a=>o.value=a)},r.value,{autocomplete:"off"}),null,16)),[[e.vModelDynamic,o.value]])}}),we=["id"],ge=e.defineComponent({__name:"comboboxOptions",setup(i){const t=e.inject(F);if(!t)throw new Error("Combobox injectable context is not provided");return(o,n)=>e.unref(t).isOpen.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:e.unref(t).popoverId,role:"listbox"},[e.renderSlot(o.$slots,"default")],8,we)):e.createCommentVNode("",!0)}}),ye=["id","data-active","aria-selected","aria-disabled"],_e=e.defineComponent({__name:"comboboxOption",props:{id:{},value:{},disabled:{type:Boolean}},setup(i){const t=i,o=t.id??x("combobox-option"),n=e.ref(),{isSelected:r,isActive:l,activate:u,select:a}=P(n,t.value,t.disabled),c=e.inject(F);if(!c)throw new Error("Combobox injectable context is not provided");function d(){a(),c.isMultiselectable.value?c.focus():c.close({focus:!0})}return(b,v)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"itemEl",ref:n,id:e.unref(o),onClick:d,onMouseenter:v[0]||(v[0]=f=>e.unref(u)({focus:!1})),"data-active":e.unref(l),"aria-selected":e.unref(r),"aria-disabled":b.disabled||void 0,role:"option"},[e.renderSlot(b.$slots,"default",{isSelected:e.unref(r),isActive:e.unref(l)})],40,ye))}});k.Combobox=Ie,k.ComboboxInput=he,k.ComboboxOption=_e,k.ComboboxOptions=ge,k.Listbox=X,k.ListboxOption=Z,k.Menu=ue,k.MenuItem=ve,k.MenuItems=me,k.Popover=le,k.PopoverDialog=ce,k.Tab=ae,k.TabContainer=ee,k.TabList=oe,k.TabPanel=re,k.Tooltip=fe,k.injectCombobox=F,k.injectMenu=H,k.injectPopover=z,k.injectTabs=N,k.useFormControl=J,k.useHTMLElement=j,k.useList=D,k.useListOption=P,k.usePopover=T,k.useSequentialId=x,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})});

package/dist/types/components/combobox/comboboxHiddenInput.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{
+    name: string;
+    value: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    name: string;
+    value: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/combobox/comboboxInput.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_PublicProps = {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/combobox/comboboxOption.vue.d.ts

@@ -0,0 +1,22 @@
+declare function __VLS_template(): {
+    default?(_: {
+        isSelected: boolean;
+        isActive: boolean;
+    }): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{
+    id?: string;
+    value: any;
+    disabled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: string;
+    value: any;
+    disabled?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/combobox/comboboxOptions.vue.d.ts

@@ -0,0 +1,11 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/injectionKeys.d.ts

@@ -0,0 +1,43 @@
+import type { ComputedRef, InjectionKey } from "vue";
+import type { UseListReturn } from "../composables/list";
+import type { UsePopoverReturn } from "../composables/popover";
+export declare const injectTabs: InjectionKey<{
+    getIds: (value: any) => ComputedRef<{
+        tabId: string | undefined;
+        panelId: string | undefined;
+    }>;
+    selectActiveItem: UseListReturn["selectActiveItem"];
+    activateFirstItem: UseListReturn["activateFirstItem"];
+    activateLastItem: UseListReturn["activateLastItem"];
+    activateNextItem: UseListReturn["activateNextItem"];
+    activatePrevItem: UseListReturn["activatePrevItem"];
+}>;
+export declare const injectPopover: InjectionKey<{
+    popoverId: string;
+    activatorId: string;
+    role: "dialog" | "listbox" | "menu" | "tree" | "grid";
+    isOpen: UsePopoverReturn["isOpen"];
+    close: UsePopoverReturn["close"];
+}>;
+export declare const injectMenu: InjectionKey<{
+    menuId: string;
+    activatorId: string;
+    isOpen: UsePopoverReturn["isOpen"];
+    close: UsePopoverReturn["close"];
+    activeItemId: ComputedRef<string | undefined>;
+    isMultiselectable: UseListReturn["isMultiselectable"];
+    activateFirstItem: UseListReturn["activateFirstItem"];
+    activateLastItem: UseListReturn["activateLastItem"];
+    activateNextItem: UseListReturn["activateNextItem"];
+    activatePrevItem: UseListReturn["activatePrevItem"];
+}>;
+export declare const injectCombobox: InjectionKey<{
+    displayValue: ComputedRef<string | undefined>;
+    popoverId: string;
+    isOpen: UsePopoverReturn["isOpen"];
+    open: UsePopoverReturn["open"];
+    close: UsePopoverReturn["close"];
+    isMultiselectable: UseListReturn["isMultiselectable"];
+    focus: () => void;
+    activatorAttrs: ComputedRef<Record<string, any>>;
+}>;

package/dist/types/components/listbox/listbox.vue.d.ts

@@ -0,0 +1,26 @@
+declare let __VLS_typeProps: {
+    orientation?: "horizontal" | "vertical";
+    loop?: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: any;
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: any) => any) | undefined;
+}>, {
+    loop: boolean;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/listbox/listboxOption.vue.d.ts

@@ -0,0 +1,22 @@
+declare function __VLS_template(): {
+    default?(_: {
+        isSelected: boolean;
+        isActive: boolean;
+    }): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{
+    id?: string;
+    value?: any;
+    disabled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: string;
+    value?: any;
+    disabled?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/menu/menuItem.vue.d.ts

@@ -0,0 +1,26 @@
+declare function __VLS_template(): {
+    default?(_: {
+        isSelected: boolean;
+        isActive: boolean;
+    }): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{
+    id?: string;
+    value?: any;
+    disabled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id?: string;
+    value?: any;
+    disabled?: boolean;
+}> & Readonly<{
+    onSelect?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/menu/menuItems.vue.d.ts

@@ -0,0 +1,11 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/popover/popoverDialog.vue.d.ts

@@ -0,0 +1,11 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/tabs/tab.vue.d.ts

@@ -0,0 +1,19 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{
+    id?: string;
+    ariaControls?: string;
+    value: string | number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: string;
+    ariaControls?: string;
+    value: string | number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/tabs/tabContainer.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_PublicProps = {
+    modelValue?: string | number;
+};
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/tabs/tabList.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{
+    orientation?: "horizontal" | "vertical";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    orientation?: "horizontal" | "vertical";
+}> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/tabs/tabPanel.vue.d.ts

@@ -0,0 +1,15 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{
+    value: string | number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    value: string | number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/tooltip.vue.d.ts

@@ -0,0 +1,36 @@
+declare function open(): void;
+declare function close(): void;
+declare function onKeyDown(evt: KeyboardEvent): void;
+declare function __VLS_template(): {
+    default?(_: {
+        attrs: {
+            "aria-describedby": string;
+            onmouseenter: typeof open;
+            onmouseleave: typeof close;
+            onfocus: typeof open;
+            onblur: typeof close;
+            onkeydown: typeof onKeyDown;
+        };
+    }): any;
+    content?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{
+    id?: string;
+    text?: string;
+    delay?: string | number;
+    direction?: "up" | "down" | "left" | "right";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: string;
+    text?: string;
+    delay?: string | number;
+    direction?: "up" | "down" | "left" | "right";
+}> & Readonly<{}>, {
+    direction: "up" | "down" | "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/composables/formControl.d.ts

@@ -0,0 +1,48 @@
+import type { MaybeRef, Ref } from "vue";
+import type { TemplateRefOrSelector } from "../utils/element";
+type FormElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+/**
+ * A validating function must return `true` or a string describing the error
+ */
+export type FormValidator = (value: string) => boolean | string;
+export interface useFormControlReturn {
+    /**
+     * Focus the form control
+     */
+    focus: () => void;
+    /**
+     * Validate the form control
+     *
+     * @returns Validation result
+     */
+    validate: () => boolean;
+    /**
+     * Whether the form control is valid. A shorthand for `validity.valid`, but can be manually overriden.
+     */
+    isValid: Ref<boolean>;
+    /**
+     * The validity state of the form control
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState}
+     */
+    validity: Readonly<Ref<ValidityState | undefined>>;
+    /**
+     * A string representing a localized message that describes the validation constraints that the control does not satisfy (if any)
+     */
+    validationMessage: Readonly<Ref<string>>;
+    /**
+     * Whether the value has been changed since the form control was mounted
+     */
+    isChanged: Ref<boolean>;
+}
+/**
+ * Utilizes Constraint Validation API to enable custom validation constrains for a form control
+ *
+ * @param el A template ref or a CSS selector
+ * @param validators An array of validating functions
+ * @param showValidationError Whether to show the default browser validation error (true by default)
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation}
+ */
+export declare function useFormControl(el: TemplateRefOrSelector<FormElement>, validators?: MaybeRef<FormValidator[]>, showValidationError?: MaybeRef<boolean>): useFormControlReturn;
+export {};

package/dist/types/composables/list.d.ts

@@ -0,0 +1,103 @@
+import type { ComputedRef, MaybeRef, Ref, ShallowRef, InjectionKey } from "vue";
+import { TemplateRefOrSelector } from "../utils/element";
+export type ItemValue = unknown;
+export interface Item {
+    id: number;
+    element: Ref<HTMLElement | undefined>;
+    value: ItemValue;
+    disabled: MaybeRef<boolean>;
+}
+export interface ActivationOptions {
+    /**
+     * Focus the corresponding HTML element
+     *
+     * @defaultValue `false`
+     */
+    focus?: boolean;
+}
+interface NavigationOptions {
+    /**
+     * Infinitely cycle through the items
+     *
+     * @defaultValue `false`
+     */
+    loop?: boolean;
+}
+export interface UseListReturn {
+    /**
+     * Array of items
+     */
+    items: Readonly<ShallowRef<Item[]>>;
+    /**
+     * Multiselection flag
+     */
+    isMultiselectable: Readonly<Ref<boolean>>;
+    /**
+     * Currently active item
+     */
+    activeItem: ComputedRef<Item | undefined>;
+    /**
+     * Select the currently active item
+     */
+    selectActiveItem: () => void;
+    /**
+     * Activate the currently selected item
+     */
+    activateSelectedItem: (options?: ActivationOptions) => void;
+    /**
+     * Activate the first item
+     */
+    activateFirstItem: (options?: ActivationOptions) => void;
+    /**
+     * Activate the last item
+     */
+    activateLastItem: (options?: ActivationOptions) => void;
+    /**
+     * Activate next item
+     */
+    activateNextItem: (options?: ActivationOptions & NavigationOptions) => void;
+    /**
+     * Activate previous item
+     */
+    activatePrevItem: (options?: ActivationOptions & NavigationOptions) => void;
+}
+interface UseListInjectionKey {
+    /**
+     * The list value
+     */
+    value: Readonly<Ref<unknown>>;
+    /**
+     * Select an item by ID
+     */
+    selectItem: (itemId: number) => void;
+    /**
+     * Activate an item by ID
+     */
+    activateItem: (itemId: number, options?: ActivationOptions) => void;
+    /**
+     * Check if an item is selected
+     */
+    isSelected: (itemId: number) => boolean;
+    /**
+     * Check if an item is active
+     */
+    isActive: (itemId: number) => boolean;
+    /**
+     * Add an item to the list
+     *
+     * @returns New item ID
+     */
+    addItem: (itemEl: TemplateRefOrSelector, itemVal: ItemValue, disabled?: MaybeRef<boolean>) => number;
+    /**
+     * Remove an item from the list by ID
+     */
+    removeItem: (itemId: number) => void;
+}
+export declare const injectList: InjectionKey<UseListInjectionKey>;
+/**
+ * Creates a reactive list of HTML elements with assigned values.
+ *
+ * @param value A ref to store the list value. Set to an array to enable multiselection.
+ */
+export declare function useList(value: Ref<unknown>): UseListReturn;
+export {};

package/dist/types/composables/listOption.d.ts

@@ -0,0 +1,30 @@
+import type { ComputedRef, MaybeRef } from "vue";
+import type { TemplateRefOrSelector } from "../utils/element";
+import type { ItemValue, ActivationOptions } from "./list";
+interface UseListOptionReturn {
+    /**
+     * Whether the item is selected
+     */
+    isSelected: ComputedRef<boolean>;
+    /**
+     * Whether the item is active
+     */
+    isActive: ComputedRef<boolean>;
+    /**
+     * Select the item
+     */
+    select: () => void;
+    /**
+     * Activate the item
+     */
+    activate: (options?: ActivationOptions) => void;
+}
+/**
+ * Registers an HTML element and an associated value in the list created in the parent component
+ *
+ * @param el A template ref or a CSS selector
+ * @param value A value of any type
+ * @param disabled Whether the item is disabled (false by default)
+ */
+export declare function useListOption(el: TemplateRefOrSelector, value: ItemValue, disabled?: MaybeRef<boolean>): UseListOptionReturn;
+export {};

package/dist/types/composables/popover.d.ts

@@ -0,0 +1,68 @@
+import type { Ref } from "vue";
+import { TemplateRefOrSelector } from "../utils/element";
+interface UsePopoverOptions {
+    /**
+     * The direction of the popover dialog
+     *
+     * @defaultValue `"down"`
+     */
+    direction?: "up" | "down" | "left" | "right";
+    /**
+     * The alignment of the popover dialog
+     *
+     * @defaultValue `"left"`
+     */
+    align?: "top" | "bottom" | "left" | "right" | "center" | "stretch";
+    /**
+     * The CSS position of the popover dialog
+     *
+     * @defaultValue `"fixed"`
+     */
+    position?: "fixed" | "absolute";
+    /**
+     * Close the popover on a click outside of the dialog
+     *
+     * @defaultValue `true`
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Close the popover on a click inside of the dialog
+     *
+     * @defaultValue `false`
+     */
+    closeOnInsideClick?: boolean;
+}
+interface FocusOptions {
+    /**
+     * Focus the popover/activator
+     *
+     * @defaultValue `true`
+     */
+    focus?: boolean;
+}
+export interface UsePopoverReturn {
+    /**
+     * The popover state
+     */
+    isOpen: Ref<boolean>;
+    /**
+     * Open the popover
+     */
+    open: (options?: FocusOptions) => void;
+    /**
+     * Close the popover
+     */
+    close: (options?: FocusOptions) => void;
+    /**
+     * Toggle the popover
+     */
+    toggle: (options?: FocusOptions) => void;
+}
+/**
+ *
+ * @param activatorEl A template ref or a CSS selector
+ * @param popupEl A template ref or a CSS selector
+ * @param options Popover options
+ */
+export declare function usePopover(activatorEl: TemplateRefOrSelector, popupEl: TemplateRefOrSelector, { direction, align, position, closeOnOutsideClick, closeOnInsideClick, }?: UsePopoverOptions): UsePopoverReturn;
+export {};