sb-floating-panel-vue 5.2.0 → 5.3.0

package/dist/sb-floating-panel.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@floating-ui/vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@floating-ui/vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SbFloatingPanelVue={},e.Vue,e.FloatingUIVue))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=`data-sbf-focus-guard`,i=[`a[href]`,`button:not([disabled])`,`input:not([disabled]):not([type="hidden"])`,`select:not([disabled])`,`textarea:not([disabled])`,`summary`,`audio[controls]`,`video[controls]`,`[tabindex]`,`[contenteditable="true"]`].join(`,`),a=e=>e.tabIndex>=0&&!e.hasAttribute(`data-sbf-focus-guard`)&&!e.closest(`[inert]`)&&(e.checkVisibility?.()??!0);function o(e){let t=e&&typeof e==`object`&&`$el`in e?e.$el:e;return t instanceof HTMLElement?t:null}function s(e){let t=e instanceof Element?e.closest(i):null;return!!t&&!t.closest(`[inert]`)}function c(e){try{return e.matches(`:focus-visible`)}catch{return!0}}var l=e=>e.matches(i)&&!e.closest(`[inert]`);function u(e){return[...e.querySelectorAll(i)].filter(a)}function d(e,t){return u(e.ownerDocument).find(n=>!!(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)&&!e.contains(n)&&!t(n))}var f=(()=>{try{return process.env.NODE_ENV!==`production`}catch{return!1}})();function p(e){f&&console.warn(`[sb-floating-panel-vue] ${e}`)}var m=e=>e.parent?.navigation.value===`menu`;function h(e,t){let n=document.activeElement,r=e.reference.value;return!n||!r||r.contains(n)||!e.contains(n)?!1:((t?r:d(r,t=>e.contains(t)))?.focus({preventScroll:!0}),!0)}var g=Symbol(`SbFloatingContext`);function _(e,t,n){return++e.parts[t]>1&&p(`<SbContainer> has more than one <${n}>: they share one open state and position, so only the last one works. Use one SbContainer for each panel.`),()=>e.parts[t]--}function v(e){let n=(0,t.inject)(g,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var y=e=>`${Math.max(0,e)}px`,b=(e,t)=>{let[n,r]=e.split(`-`),i=t&&(n===`top`||n===`bottom`),a=r===`start`?i?`100%`:`0%`:r===`end`?i?`0%`:`100%`:`50%`;return n===`top`?`${a} 100%`:n===`bottom`?`${a} 0%`:n===`left`?`100% ${a}`:`0% ${a}`};function x(e){let r=(0,t.ref)(null),i=(0,t.ref)(null),a=(0,t.computed)(()=>{let r=(0,t.toValue)(e.padding),i=(0,t.toValue)(e.matchWidth),a=(0,t.toValue)(e.placement).includes(`-`),o=(0,n.flip)({padding:r,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),s=(0,n.shift)({padding:r,limiter:(0,n.limitShift)()}),c=[(0,n.offset)((0,t.toValue)(e.offset)),...a?[o,s]:[s,o],(0,n.size)({padding:r,apply({rects:e,elements:t,availableWidth:n,availableHeight:r,placement:a}){let{style:o}=t.floating,s=y(e.reference.width);o.setProperty(`--sbf-reference-width`,s);let c=getComputedStyle(t.floating).direction===`rtl`;o.setProperty(`--sbf-transform-origin`,b(a,c)),o.setProperty(`--sbf-available-width`,y(n)),o.setProperty(`--sbf-available-height`,y(r)),o.width=i===!0?s:``,o.minWidth=i===`min`?s:``}})];return(0,t.toValue)(e.hideWhenDetached)&&c.push((0,n.hide)({padding:r})),c}),{floatingStyles:o,middlewareData:s,placement:c,isPositioned:l,update:u}=(0,n.useFloating)(r,i,{open:()=>(0,t.toValue)(e.isOpen),placement:()=>(0,t.toValue)(e.placement),strategy:()=>(0,t.toValue)(e.strategy),middleware:a,whileElementsMounted:n.autoUpdate}),d=(0,t.computed)(()=>!!s.value.hide?.referenceHidden);return{reference:r,floating:i,floatingStyles:(0,t.computed)(()=>({...o.value,...d.value?{visibility:`hidden`}:{}})),placement:c,side:(0,t.computed)(()=>c.value.split(`-`)[0]),align:(0,t.computed)(()=>c.value.split(`-`)[1]),isPositioned:l,referenceHidden:d,update:u}}var S=[],C={open:300,close:150},w=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbContainer`,props:(0,t.mergeModels)({placement:{default:`bottom-start`},strategy:{default:`absolute`},offset:{default:8},padding:{default:8},matchWidth:{type:[Boolean,String],default:!1},hideWhenDetached:{type:[Boolean,String],default:!1},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{default:`click`},delay:{default:()=>({...C})},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},closeOnFocusOut:{type:Boolean,default:!0}},{open:{type:Boolean,default:void 0},openModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:open`]),setup(e,{expose:n,emit:r}){let i=e,a=(0,t.useModel)(e,`open`),o=r,c=i.defaultOpen,l=(0,t.computed)(()=>!i.disabled&&(a.value??c)),u;(0,t.onScopeDispose)(()=>clearTimeout(u));let d,f=((e,n)=>{clearTimeout(u),!(e&&i.disabled)&&e!==l.value&&(d=n,a.value=e,(0,t.nextTick)(()=>d=void 0))}),p=()=>f(!0,`api`),m=()=>f(!1,`api`),_=()=>f(!l.value,`api`),v=e=>{if(e.pointerType===`touch`||(w?.hover(e),i.trigger!==`hover`))return;let t=e.type===`pointerenter`||T.contains(e.relatedTarget);if(clearTimeout(u),t===l.value)return;let{delay:n}=i,r=t?`open`:`close`,a=typeof n==`number`?n:n[r]??C[r];u=setTimeout(()=>f(t,`hover`),a)},y=x({isOpen:l,placement:()=>i.placement,strategy:()=>i.strategy,offset:()=>i.offset,padding:()=>i.padding,matchWidth:()=>i.matchWidth,hideWhenDetached:()=>i.hideWhenDetached}),b=new Set,w=(0,t.inject)(g,null),T={...y,isOpen:l,disabled:(0,t.toRef)(i,`disabled`),trigger:(0,t.toRef)(i,`trigger`),floatingId:`${(0,t.useId)()}-floating`,referenceId:(0,t.ref)(),floatingRole:(0,t.ref)(`dialog`),navigation:(0,t.ref)(null),focusRequest:(0,t.ref)(null),parent:w,skipFocusReturn:!1,parts:{reference:0,floating:0},isUnmounting:!1,open:p,close:m,toggle:_,setOpen:f,hover:v,contains:e=>e instanceof Node?y.reference.value?.contains(e)||y.floating.value?.contains(e)?!0:[...b].some(t=>t.contains(e)):!1,registerChild:e=>(b.add(e),()=>b.delete(e))};w&&(0,t.onScopeDispose)(w.registerChild(T)),(0,t.provide)(g,T),(0,t.onBeforeUnmount)(()=>{T.isUnmounting=!0,h(T,!1)});let E=e=>{let t=e.composedPath()[0]??e.target;return S.findLast(e=>e.contains(t))??S[S.length-1]},D=e=>{e.key===`Escape`&&E(e)===T&&(!i.closeOnEscape||e.defaultPrevented||e.isComposing||(e.preventDefault(),f(!1,`escape`)))},O=e=>{T.contains(e)||(T.skipFocusReturn=s(e),f(!1,`outside`))},k,A=e=>{if(k?.(),!i.closeOnClickOutside)return;let t=e.composedPath()[0]??e.target;if(e.pointerType!==`touch`){O(t);return}if(T.contains(t))return;let n=e=>{k?.(),O(e.composedPath()[0]??e.target)};document.addEventListener(`click`,n,!0),k=()=>{document.removeEventListener(`click`,n,!0),k=void 0}},j=e=>{i.closeOnFocusOut&&(T.contains(e.composedPath()[0]??e.target)||f(!1,`focus-out`))};return(0,t.watch)(l,(e,t,n)=>{e&&typeof document<`u`&&(S.push(T),document.addEventListener(`keydown`,D),document.addEventListener(`pointerdown`,A,!0),document.addEventListener(`focusin`,j),n(()=>{document.removeEventListener(`keydown`,D),document.removeEventListener(`pointerdown`,A,!0),document.removeEventListener(`focusin`,j),k?.(),S.splice(S.indexOf(T),1)}))},{immediate:!0}),(0,t.watch)(l,e=>{let t=d??(!e&&i.disabled?`disabled`:`api`);d=void 0,o(e?`open`:`close`,t)}),(0,t.watch)(y.referenceHidden,e=>{e&&i.hideWhenDetached===`close`&&f(!1,`detached`)}),(0,t.watch)(()=>i.disabled,e=>{e&&(a.value??c)&&(a.value=!1)}),n({get isOpen(){return l.value},open:p,close:m,toggle:_,update:y.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:l.value,open:p,close:m,toggle:_,placement:(0,t.unref)(y).placement.value,side:(0,t.unref)(y).side.value,align:(0,t.unref)(y).align.value,floatingId:T.floatingId,referenceId:T.referenceId.value})}}),T={dialog:`dialog`,alertdialog:`dialog`,menu:`menu`,listbox:`listbox`,tree:`tree`,grid:`grid`},E={menu:`[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]`,listbox:`[role="option"]`},D=e=>!!e&&Object.hasOwn(E,e);function O(e,t){return[...e.querySelectorAll(E[t])].filter(n=>n.closest(`[role="${t}"]`)===e&&!n.matches(`:disabled`)&&(n.checkVisibility?.()??!0))}var k=e=>e instanceof Element&&!!e.closest(`input, textarea, select, [contenteditable]:not([contenteditable="false"])`),A=e=>getComputedStyle(e).direction===`rtl`?{open:`ArrowLeft`,close:`ArrowRight`}:{open:`ArrowRight`,close:`ArrowLeft`},j=(0,t.defineComponent)({__name:`SbReference`,props:{as:{default:`button`},id:{default:void 0},ariaHaspopup:{default:void 0}},setup(e){let n=e,r=(0,t.useAttrs)(),i=v(`SbReference`),{isOpen:a,disabled:s,floatingId:l,floatingRole:d}=i,f=_(i,`reference`,`SbReference`),g=[`button`,`input`,`textarea`,`select`],y=()=>typeof n.as!=`string`||g.includes(n.as)||n.as===`a`&&r.href!=null,b=`${(0,t.useId)()}-reference`,x=(0,t.computed)(()=>n.id??b);(0,t.watchEffect)(()=>{i.referenceId.value=x.value}),(0,t.onMounted)(()=>{let e=i.reference.value;e?k(e)&&i.navigation.value&&p(`<SbReference> is a text field with a role="${i.navigation.value}" panel: the arrow keys move focus into the panel, so typing stops there. The combobox pattern (focus kept in the field with aria-activedescendant) is not supported.`):p("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.")}),(0,t.onBeforeUnmount)(()=>{i.referenceId.value===x.value&&(i.referenceId.value=void 0),f(),!i.parts.reference&&!i.isUnmounting&&(i.skipFocusReturn=h(i,!1),i.setOpen(!1,`api`))});let S=(0,t.computed)(()=>n.ariaHaspopup??(d.value&&Object.hasOwn(T,d.value)?T[d.value]:void 0)),C=e=>{i.reference.value=o(e)},w=()=>{i.trigger.value===`click`&&(k(i.reference.value)?i.setOpen(!0,`trigger`):i.setOpen(!a.value,`trigger`))},E=(0,t.computed)(()=>d.value===`tooltip`),D=()=>i.trigger.value===`hover`||i.trigger.value===`focus`,O=e=>{if(!D()||m(i)||i.contains(e.relatedTarget))return;let t=e.target;(i.trigger.value===`focus`||c(t))&&i.setOpen(!0,`focus`)},j=e=>{D()&&!i.contains(e.relatedTarget)&&i.setOpen(!1,`focus-out`)},M=e=>{let t=i.floating.value,n=t&&u(t)[0];n&&(e.preventDefault(),n.focus())},N=e=>{if(i.navigation.value&&!s.value&&i.trigger.value!==`manual`){if(m(i)){let t=e.currentTarget;return e.key===A(t).open?`first`:void 0}return e.key===`ArrowDown`?`first`:e.key===`ArrowUp`?`last`:void 0}},P=e=>{if(e.key===`Tab`&&!e.shiftKey&&a.value&&!m(i)){M(e);return}let t=N(e);t?(e.preventDefault(),i.focusRequest.value=t,i.setOpen(!0,`trigger`)):y()||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),w())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{id:x.value,ref:C,type:n.as===`button`?`button`:void 0,role:y()?void 0:`button`,tabindex:y()?void 0:(0,t.unref)(s)?-1:0,disabled:n.as===`button`&&(0,t.unref)(s)?!0:void 0,"aria-disabled":n.as!==`button`&&(0,t.unref)(s)?`true`:void 0,"aria-haspopup":S.value,"aria-expanded":E.value?void 0:(0,t.unref)(a)?`true`:`false`,"aria-controls":(0,t.unref)(a)&&!E.value?(0,t.unref)(l):void 0,"aria-describedby":(0,t.unref)(a)&&E.value?(0,t.unref)(l):void 0,"data-sbf-state":(0,t.unref)(a)?`open`:`closed`,onClick:w,onKeydown:P,onFocusin:O,onFocusout:j,onPointerenter:(0,t.unref)(i).hover,onPointerleave:(0,t.unref)(i).hover},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},40,[`id`,`type`,`role`,`tabindex`,`disabled`,`aria-disabled`,`aria-haspopup`,`aria-expanded`,`aria-controls`,`aria-describedby`,`data-sbf-state`,`onPointerenter`,`onPointerleave`]))}}),M=`:disabled, [aria-disabled="true"], [aria-haspopup]:not([aria-haspopup="false"])`,N=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbFloating`,props:{as:{default:`div`},role:{default:`dialog`},transition:{default:void 0},teleport:{type:[String,Boolean],default:`body`},zIndex:{default:void 0},autoFocus:{type:Boolean,default:void 0},keyboardNavigation:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!1}},emits:[`after-enter`,`after-leave`],setup(e,{emit:n}){let i=e,a=n,s=(0,t.useAttrs)(),c=v(`SbFloating`);(0,t.onBeforeUnmount)(_(c,`floating`,`SbFloating`)),(0,t.onBeforeUnmount)(()=>{c.isUnmounting||h(c,!0)});let{isOpen:f,floatingId:g,referenceId:y,side:b,align:x}=c;(0,t.watchEffect)(()=>{c.floatingRole.value=i.role,c.navigation.value=i.keyboardNavigation&&D(i.role)?i.role:null}),(0,t.onMounted)(()=>{i.role===`tooltip`&&c.trigger.value===`click`&&p(`<SbFloating role="tooltip"> opens on click: a tooltip shows on hover and focus. Set trigger="hover" or "focus" on SbContainer, or use another role for a panel opened by click.`)});let S=(0,t.ref)(f.value),C=(0,t.ref)(null),w=e=>{c.floating.value=e instanceof HTMLElement?e:null},E=e=>{C.value=o(e)},j=(0,t.computed)(()=>({...c.floatingStyles.value,...i.zIndex===void 0?{}:{zIndex:i.zIndex}})),N=()=>({"aria-labelledby":i.role&&Object.hasOwn(T,i.role)&&s[`aria-label`]==null?y.value:void 0,...s}),P=(0,t.computed)(()=>i.autoFocus??(i.role!==`tooltip`&&c.trigger.value!==`hover`&&c.trigger.value!==`focus`&&!k(c.reference.value))),F=(0,t.computed)(()=>f.value&&i.teleport!==!1&&i.role!==`tooltip`),I={[r]:``,tabindex:0,style:{position:`fixed`,opacity:0,outline:`none`,pointerEvents:`none`}},L=(0,t.computed)(()=>{let{transition:e}=i;return e?typeof e==`string`?{name:e}:e:{css:!1}}),R=e=>e.setAttribute(`data-sbf-state`,`closed`),z=()=>a(`after-enter`),B=()=>{f.value||(S.value=!1),a(`after-leave`)},V=e=>e instanceof Node&&!!C.value?.contains(e),H=e=>{let t=C.value;if(!t)return;let n=u(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},U=e=>{V(e.relatedTarget)?c.reference.value?.focus():H(`first`)},ee=e=>{if(!V(e.relatedTarget)){H(`last`);return}let t=c.reference.value;((t&&d(t,e=>c.contains(e)))??t)?.focus()},W=e=>{if(e.key!==`Tab`||!e.shiftKey||e.defaultPrevented)return;let t=c.reference.value;t&&C.value&&u(C.value).length&&(e.composedPath()[0]??e.target)===d(t,e=>c.contains(e))&&(e.preventDefault(),H(`last`))};(0,t.watch)(F,(e,t,n)=>{e&&typeof document<`u`&&(document.addEventListener(`keydown`,W),n(()=>document.removeEventListener(`keydown`,W)))},{immediate:!0});let G=()=>{let e=c.navigation.value;return C.value&&e?O(C.value,e):[]},te={menu:`[role="menuitem"]`,listbox:`[role="option"]`},ne={menu:`role="menuitem", "menuitemcheckbox" or "menuitemradio"`,listbox:`role="option"`},K=!1,q=e=>{let t=c.navigation.value;if(K||!t)return;let n=e.length?e.every(l)?null:`has items that cannot take focus, so the arrow keys cannot move to them: make each one a button, or give it tabindex="-1".`:`has no items the arrow keys can move to: items need ${ne[t]} and must not be disabled.`;n&&(K=!0,p(`<SbFloating role="${t}"> ${n}`))},J=e=>{let t=C.value;if(!t)return;let n=G();e&&q(n),(n.find(e=>e.getAttribute(`aria-selected`)===`true`)??(e===`last`?n[n.length-1]:e?n[0]:void 0)??t.querySelector(`[autofocus]`)??n[0]??u(t)[0]??t).focus({preventScroll:!0})},Y=()=>{let e=c.focusRequest.value;return c.focusRequest.value=null,e},X=``,Z;(0,t.onScopeDispose)(()=>clearTimeout(Z));let re=(e,t,n)=>{X+=n.toLowerCase(),clearTimeout(Z),Z=setTimeout(()=>X=``,500);let r=[...X].every(e=>e===X[0])?X[0]:X,i=Math.max(t,0),a=[...e.slice(i),...e.slice(0,i)];return r.length===1&&t>=0&&a.push(a.shift()),a.find(e=>e.textContent?.trim().toLowerCase().startsWith(r))},Q=()=>{let e=[c];for(;m(e[e.length-1]);)e.push(e[e.length-1].parent);return e},$=(e,t,n)=>{for(let t of e)t.skipFocusReturn=!0,t.setOpen(!1,n);t?.focus({preventScroll:!0})},ie=e=>{let t=Q(),n=t[t.length-1],r=n.reference.value,i=e?r:(r&&d(r,e=>n.contains(e)))??r;$(t,i,`focus-out`)},ae=e=>{let{role:t}=i,n=C.value;if(!i.closeOnSelect||e.defaultPrevented||!n||!D(t))return;let r=e.target.closest(te[t]);if(!r||r.closest(`[role="${t}"]`)!==n||r.matches(M)||t===`listbox`&&n.getAttribute(`aria-multiselectable`)===`true`)return;let a=t===`menu`?Q():[c];$(a,a[a.length-1].reference.value,`select`)},oe=e=>{let t=c.navigation.value;if(!t||e.defaultPrevented||e.isComposing||k(e.target))return;let n=G(),r=n.findIndex(t=>t.contains(e.target)),i=n.length-1,a=t===`menu`,o;if([`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key)&&q(n),e.key===`ArrowDown`)o=n[r<i?r+1:a?0:i];else if(e.key===`ArrowUp`)o=n[r>0?r-1:a||r<0?i:0];else if(e.key===`Home`)o=n[0];else if(e.key===`End`)o=n[i];else if(e.key===`Tab`&&t===`menu`){e.preventDefault(),ie(e.shiftKey);return}else if(t===`menu`&&m(c)&&C.value&&e.key===A(C.value).close){e.preventDefault(),c.setOpen(!1,`escape`);return}else if(e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.key!==` `||X))e.preventDefault(),o=re(n,r,e.key);else if((e.key===`Enter`||e.key===` `)&&e.target===n[r]){let t=n[r];if(t.matches(`button, a[href], input, summary`))return;e.preventDefault(),t.getAttribute(`aria-disabled`)!==`true`&&t.click();return}o&&(e.preventDefault(),o.focus())};return(0,t.watch)(f,e=>{let t=c.skipFocusReturn;if(c.skipFocusReturn=!1,e){S.value=!0;return}let n=document.activeElement;!t&&n&&c.floating.value?.contains(n)&&c.reference.value?.focus({preventScroll:!0})}),(0,t.watch)(()=>f.value&&c.isPositioned.value,async e=>{if(!e)return;let n=Y();(n||P.value)&&(await(0,t.nextTick)(),J(n))}),(0,t.watch)(c.focusRequest,e=>{e&&f.value&&c.isPositioned.value&&J(Y())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:i.teleport||`body`,disabled:i.teleport===!1},[S.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:w,style:(0,t.normalizeStyle)(j.value),onPointerenter:n[0]||=(...e)=>(0,t.unref)(c).hover&&(0,t.unref)(c).hover(...e),onPointerleave:n[1]||=(...e)=>(0,t.unref)(c).hover&&(0,t.unref)(c).hover(...e)},[F.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0},I,{onFocus:U}),null,16)):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(t.Transition,(0,t.mergeProps)(L.value,{appear:``,onBeforeLeave:R,onAfterEnter:z,onAfterLeave:B}),{default:(0,t.withCtx)(()=>[(0,t.unref)(f)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(i.as),(0,t.mergeProps)({key:0},N(),{id:(0,t.unref)(g),ref:E,role:i.role??void 0,tabindex:P.value?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(b),"data-sbf-align":(0,t.unref)(x),onKeydown:oe,onClick:ae}),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`role`,`tabindex`,`data-sbf-side`,`data-sbf-align`])):(0,t.createCommentVNode)(``,!0)]),_:3},16),F.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:1},I,{onFocus:ee}),null,16)):(0,t.createCommentVNode)(``,!0)],36)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});function P(){let e=(0,t.inject)(g,null);if(!e)throw Error(`[sb-floating-panel-vue] useSbFloating() must be called in a component inside <SbContainer>.`);let{isOpen:n,open:r,close:i,toggle:a}=e;return{isOpen:(0,t.readonly)(n),open:r,close:i,toggle:a}}e.SbContainer=w,e.SbFloating=N,e.SbReference=j,e.useSbFloating=P});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@floating-ui/vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@floating-ui/vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SbFloatingPanelVue={},e.Vue,e.FloatingUIVue))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=`data-sbf-focus-guard`,i=[`a[href]`,`button:not([disabled])`,`input:not([disabled]):not([type="hidden"])`,`select:not([disabled])`,`textarea:not([disabled])`,`summary`,`audio[controls]`,`video[controls]`,`[tabindex]`,`[contenteditable="true"]`].join(`,`),a=e=>e.tabIndex>=0&&!e.hasAttribute(`data-sbf-focus-guard`)&&!e.closest(`[inert]`)&&(e.checkVisibility?.()??!0);function o(e){let t=e&&typeof e==`object`&&`$el`in e?e.$el:e;return t instanceof HTMLElement?t:null}function s(e){let t=e instanceof Element?e.closest(i):null;return!!t&&!t.closest(`[inert]`)}function c(e){try{return e.matches(`:focus-visible`)}catch{return!0}}var l=e=>e.matches(i)&&!e.closest(`[inert]`);function u(e){return[...e.querySelectorAll(i)].filter(a)}function d(e,t){return u(e.ownerDocument).find(n=>!!(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)&&!e.contains(n)&&!t(n))}var f=(()=>{try{return process.env.NODE_ENV!==`production`}catch{return!1}})();function p(e){f&&console.warn(`[sb-floating-panel-vue] ${e}`)}var m=e=>e.parent?.navigation.value===`menu`;function h(e,t){let n=document.activeElement,r=e.reference.value;return!n||!r||r.contains(n)||!e.contains(n)?!1:((t?r:d(r,t=>e.contains(t)))?.focus({preventScroll:!0}),!0)}var g=Symbol(`SbFloatingContext`);function _(e,t,n){return++e.parts[t]>1&&p(`<SbContainer> has more than one <${n}>: they share one open state and position, so only the last one works. Use one SbContainer for each panel.`),()=>e.parts[t]--}function v(e){let n=(0,t.inject)(g,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var y=e=>`${Math.max(0,e)}px`,b=(e,t)=>{let[n,r]=e.split(`-`),i=t&&(n===`top`||n===`bottom`),a=r===`start`?i?`100%`:`0%`:r===`end`?i?`0%`:`100%`:`50%`;return n===`top`?`${a} 100%`:n===`bottom`?`${a} 0%`:n===`left`?`100% ${a}`:`0% ${a}`};function x(e,r){let i=(0,t.ref)(null),a=(0,t.ref)(null),o=(0,t.computed)(()=>{let{padding:t,matchWidth:r}=e,i=e.placement.includes(`-`),a=(0,n.flip)({padding:t,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),o=(0,n.shift)({padding:t,limiter:(0,n.limitShift)()}),s=[(0,n.offset)(e.offset),...i?[a,o]:[o,a],(0,n.size)({padding:t,apply({rects:e,elements:t,availableWidth:n,availableHeight:i,placement:a}){let{style:o}=t.floating,s=y(e.reference.width);o.setProperty(`--sbf-reference-width`,s);let c=getComputedStyle(t.floating).direction===`rtl`;o.setProperty(`--sbf-transform-origin`,b(a,c)),o.setProperty(`--sbf-available-width`,y(n)),o.setProperty(`--sbf-available-height`,y(i)),o.width=r===!0?s:``,o.minWidth=r===`min`?s:``}})];return e.hideWhenDetached&&s.push((0,n.hide)({padding:t})),s}),{floatingStyles:s,middlewareData:c,placement:l,isPositioned:u,update:d}=(0,n.useFloating)(i,a,{open:r,placement:()=>e.placement,strategy:()=>e.strategy,middleware:o,whileElementsMounted:n.autoUpdate}),f=(0,t.computed)(()=>!!c.value.hide?.referenceHidden);return{reference:i,floating:a,floatingStyles:(0,t.computed)(()=>({...s.value,...f.value?{visibility:`hidden`}:{}})),placement:l,side:(0,t.computed)(()=>l.value.split(`-`)[0]),align:(0,t.computed)(()=>l.value.split(`-`)[1]),isPositioned:u,referenceHidden:f,update:d}}var S=[],C={open:300,close:150},w=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbContainer`,props:(0,t.mergeModels)({placement:{default:`bottom-start`},strategy:{default:`absolute`},offset:{default:8},padding:{default:8},matchWidth:{type:[Boolean,String],default:!1},hideWhenDetached:{type:[Boolean,String],default:!1},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{default:`click`},delay:{default:()=>({...C})},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},closeOnFocusOut:{type:Boolean,default:!0}},{open:{type:Boolean,default:void 0},openModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:open`]),setup(e,{expose:n,emit:r}){let i=e,a=(0,t.useModel)(e,`open`),o=r,c=i.defaultOpen,l=(0,t.computed)(()=>!i.disabled&&(a.value??c)),u;(0,t.onScopeDispose)(()=>clearTimeout(u));let d,f=((e,n)=>{clearTimeout(u),!(e&&i.disabled)&&e!==l.value&&(d=n,a.value=e,(0,t.nextTick)(()=>d=void 0))}),p=()=>f(!0,`api`),m=()=>f(!1,`api`),_=()=>f(!l.value,`api`),v=e=>{if(e.pointerType===`touch`||(w?.hover(e),i.trigger!==`hover`))return;let t=e.type===`pointerenter`||T.contains(e.relatedTarget);if(clearTimeout(u),t===l.value)return;let{delay:n}=i,r=t?`open`:`close`,a=typeof n==`number`?n:n[r]??C[r];u=setTimeout(()=>f(t,`hover`),a)},y=x(i,l),b=new Set,w=(0,t.inject)(g,null),T={...y,isOpen:l,disabled:(0,t.toRef)(i,`disabled`),trigger:(0,t.toRef)(i,`trigger`),floatingId:`${(0,t.useId)()}-floating`,referenceId:(0,t.ref)(),floatingRole:(0,t.ref)(`dialog`),navigation:(0,t.ref)(null),focusRequest:(0,t.ref)(null),parent:w,skipFocusReturn:!1,parts:{reference:0,floating:0},isUnmounting:!1,open:p,close:m,toggle:_,setOpen:f,hover:v,contains:e=>e instanceof Node?y.reference.value?.contains(e)||y.floating.value?.contains(e)?!0:[...b].some(t=>t.contains(e)):!1,registerChild:e=>(b.add(e),()=>b.delete(e))};w&&(0,t.onScopeDispose)(w.registerChild(T)),(0,t.provide)(g,T),(0,t.onBeforeUnmount)(()=>{T.isUnmounting=!0,h(T,!1)});let E=e=>{let t=e.composedPath()[0]??e.target,n=S.filter(e=>e.closeOnEscape());return(n.findLast(e=>e.context.contains(t))??n[n.length-1])?.context},D=e=>{e.key===`Escape`&&E(e)===T&&(e.defaultPrevented||e.isComposing||(e.preventDefault(),f(!1,`escape`)))},O=e=>{T.contains(e)||(T.skipFocusReturn=s(e),f(!1,`outside`))},k,A=e=>{if(k?.(),!i.closeOnClickOutside)return;let t=e.composedPath()[0]??e.target;if(e.pointerType!==`touch`){O(t);return}if(T.contains(t))return;let n=e=>{k?.(),O(e.composedPath()[0]??e.target)};document.addEventListener(`click`,n,!0),k=()=>{document.removeEventListener(`click`,n,!0),k=void 0}},j=e=>{i.closeOnFocusOut&&(T.contains(e.composedPath()[0]??e.target)||f(!1,`focus-out`))};return(0,t.watch)(l,(e,t,n)=>{if(!e||typeof document>`u`)return;let r={context:T,closeOnEscape:()=>i.closeOnEscape};S.push(r),document.addEventListener(`keydown`,D),document.addEventListener(`pointerdown`,A,!0),document.addEventListener(`focusin`,j),n(()=>{document.removeEventListener(`keydown`,D),document.removeEventListener(`pointerdown`,A,!0),document.removeEventListener(`focusin`,j),k?.(),S.splice(S.indexOf(r),1)})},{immediate:!0}),(0,t.watch)(l,e=>{let t=d??(!e&&i.disabled?`disabled`:`api`);d=void 0,o(e?`open`:`close`,t)}),(0,t.watch)(y.referenceHidden,e=>{e&&i.hideWhenDetached===`close`&&f(!1,`detached`)}),(0,t.watch)(()=>i.disabled,e=>{e&&(a.value??c)&&(a.value=!1)}),n({get isOpen(){return l.value},open:p,close:m,toggle:_,update:y.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:l.value,open:p,close:m,toggle:_,placement:(0,t.unref)(y).placement.value,side:(0,t.unref)(y).side.value,align:(0,t.unref)(y).align.value,floatingId:T.floatingId,referenceId:T.referenceId.value})}}),T={dialog:`dialog`,alertdialog:`dialog`,menu:`menu`,listbox:`listbox`,tree:`tree`,grid:`grid`},E={menu:`[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]`,listbox:`[role="option"]`},D=e=>!!e&&Object.hasOwn(E,e);function O(e,t){return[...e.querySelectorAll(E[t])].filter(n=>n.closest(`[role="${t}"]`)===e&&!n.matches(`:disabled`)&&(n.checkVisibility?.()??!0))}var k=e=>e instanceof Element&&!!e.closest(`input, textarea, select, [contenteditable]:not([contenteditable="false"])`),A=e=>getComputedStyle(e).direction===`rtl`?{open:`ArrowLeft`,close:`ArrowRight`}:{open:`ArrowRight`,close:`ArrowLeft`},j=(0,t.defineComponent)({__name:`SbReference`,props:{as:{default:`button`},id:{},ariaHaspopup:{}},setup(e){let n=e,r=(0,t.useAttrs)(),i=v(`SbReference`),{isOpen:a,disabled:s,floatingId:l,floatingRole:d}=i,f=_(i,`reference`,`SbReference`),g=[`button`,`input`,`textarea`,`select`],y=()=>typeof n.as!=`string`||g.includes(n.as)||n.as===`a`&&r.href!=null,b=`${(0,t.useId)()}-reference`,x=(0,t.computed)(()=>n.id??b);(0,t.watchEffect)(()=>{i.referenceId.value=x.value}),(0,t.onMounted)(()=>{let e=i.reference.value;e?k(e)&&i.navigation.value&&p(`<SbReference> is a text field with a role="${i.navigation.value}" panel: the arrow keys move focus into the panel, so typing stops there. The combobox pattern (focus kept in the field with aria-activedescendant) is not supported.`):p("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.")}),(0,t.onBeforeUnmount)(()=>{i.referenceId.value===x.value&&(i.referenceId.value=void 0),f(),!i.parts.reference&&!i.isUnmounting&&(i.skipFocusReturn=h(i,!1),i.setOpen(!1,`api`))});let S=(0,t.computed)(()=>n.ariaHaspopup??(d.value&&Object.hasOwn(T,d.value)?T[d.value]:void 0)),C=e=>{i.reference.value=o(e)},w=e=>{s.value&&i.reference.value instanceof HTMLAnchorElement&&e?.preventDefault(),i.trigger.value===`click`&&(k(i.reference.value)?i.setOpen(!0,`trigger`):i.setOpen(!a.value,`trigger`))},E=(0,t.computed)(()=>d.value===`tooltip`),D=()=>i.trigger.value===`hover`||i.trigger.value===`focus`,O=e=>{if(!D()||m(i)||i.contains(e.relatedTarget))return;let t=e.target;(i.trigger.value===`focus`||c(t))&&i.setOpen(!0,`focus`)},j=e=>{D()&&!i.contains(e.relatedTarget)&&i.setOpen(!1,`focus-out`)},M=e=>{let t=i.floating.value,n=t&&u(t)[0];n&&(e.preventDefault(),n.focus())},N=e=>{if(i.navigation.value&&!s.value&&i.trigger.value!==`manual`){if(m(i)){let t=e.currentTarget;return e.key===A(t).open?`first`:void 0}return e.key===`ArrowDown`?`first`:e.key===`ArrowUp`?`last`:void 0}},P=e=>{if(e.key===`Tab`&&!e.shiftKey&&a.value&&!m(i)){M(e);return}let t=N(e);t?(e.preventDefault(),i.focusRequest.value=t,i.setOpen(!0,`trigger`)):y()||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),w())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{id:x.value,ref:C,type:n.as===`button`?`button`:void 0,role:y()?void 0:`button`,tabindex:y()?void 0:(0,t.unref)(s)?-1:0,disabled:n.as===`button`&&(0,t.unref)(s)?!0:void 0,"aria-disabled":n.as!==`button`&&(0,t.unref)(s)?`true`:void 0,"aria-haspopup":S.value,"aria-expanded":E.value?void 0:(0,t.unref)(a)?`true`:`false`,"aria-controls":(0,t.unref)(a)&&!E.value?(0,t.unref)(l):void 0,"aria-describedby":(0,t.unref)(a)&&E.value?(0,t.unref)(l):void 0,"data-sbf-state":(0,t.unref)(a)?`open`:`closed`,onClick:w,onKeydown:P,onFocusin:O,onFocusout:j,onPointerenter:(0,t.unref)(i).hover,onPointerleave:(0,t.unref)(i).hover},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},40,[`id`,`type`,`role`,`tabindex`,`disabled`,`aria-disabled`,`aria-haspopup`,`aria-expanded`,`aria-controls`,`aria-describedby`,`data-sbf-state`,`onPointerenter`,`onPointerleave`]))}}),M=`:disabled, [aria-disabled="true"], [aria-haspopup]:not([aria-haspopup="false"])`,N=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbFloating`,props:{as:{default:`div`},role:{default:`dialog`},transition:{},teleport:{type:[String,Boolean],default:`body`},zIndex:{},autoFocus:{type:Boolean,default:void 0},keyboardNavigation:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!1}},emits:[`after-enter`,`after-leave`],setup(e,{emit:n}){let i=e,a=n,s=(0,t.useAttrs)(),c=v(`SbFloating`);(0,t.onBeforeUnmount)(_(c,`floating`,`SbFloating`)),(0,t.onBeforeUnmount)(()=>{c.isUnmounting||h(c,!0)});let{isOpen:f,floatingId:g,referenceId:y,side:b,align:x}=c;(0,t.watchEffect)(()=>{c.floatingRole.value=i.role,c.navigation.value=i.keyboardNavigation&&D(i.role)?i.role:null}),(0,t.onMounted)(()=>{i.role===`tooltip`&&c.trigger.value===`click`&&p(`<SbFloating role="tooltip"> opens on click: a tooltip shows on hover and focus. Set trigger="hover" or "focus" on SbContainer, or use another role for a panel opened by click.`)});let S=(0,t.ref)(f.value),C=(0,t.ref)(null),w=e=>{c.floating.value=e instanceof HTMLElement?e:null},j=e=>{C.value=o(e)},N=(0,t.computed)(()=>({...c.floatingStyles.value,...i.zIndex===void 0?{}:{zIndex:i.zIndex}})),P=()=>({"aria-labelledby":i.role&&Object.hasOwn(T,i.role)&&s[`aria-label`]==null?y.value:void 0,...s}),F=(0,t.computed)(()=>i.autoFocus??(i.role!==`tooltip`&&c.trigger.value!==`hover`&&c.trigger.value!==`focus`&&!k(c.reference.value))),I=(0,t.computed)(()=>f.value&&i.teleport!==!1&&i.role!==`tooltip`),L={[r]:``,tabindex:0,style:{position:`fixed`,opacity:0,outline:`none`,pointerEvents:`none`}},R=(0,t.computed)(()=>{let{transition:e}=i;return e?typeof e==`string`?{name:e}:e:{css:!1}}),z=e=>e.setAttribute(`data-sbf-state`,`closed`),B=()=>a(`after-enter`),V=()=>{f.value||(S.value=!1),a(`after-leave`)},H=e=>e instanceof Node&&!!C.value?.contains(e),U=e=>{let t=C.value;if(!t)return;let n=u(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},ee=e=>{H(e.relatedTarget)?c.reference.value?.focus():U(`first`)},te=e=>{if(!H(e.relatedTarget)){U(`last`);return}let t=c.reference.value;((t&&d(t,e=>c.contains(e)))??t)?.focus()},W=e=>{if(e.key!==`Tab`||!e.shiftKey||e.defaultPrevented)return;let t=c.reference.value;t&&C.value&&u(C.value).length&&(e.composedPath()[0]??e.target)===d(t,e=>c.contains(e))&&(e.preventDefault(),U(`last`))};(0,t.watch)(I,(e,t,n)=>{e&&typeof document<`u`&&(document.addEventListener(`keydown`,W),n(()=>document.removeEventListener(`keydown`,W)))},{immediate:!0});let G=()=>{let e=c.navigation.value;return C.value&&e?O(C.value,e):[]},ne={menu:`[role="menuitem"]`,listbox:`[role="option"]`},K=!1,q=e=>{let t=c.navigation.value;if(K||!t)return;let n=e.length?e.every(l)?null:`has items that cannot take focus, so the arrow keys cannot move to them: make each one a button, or give it tabindex="-1".`:`has no items the arrow keys can move to: items need ${E[t]} and must not be disabled.`;n&&(K=!0,p(`<SbFloating role="${t}"> ${n}`))},J=e=>{let t=C.value;if(!t)return;let n=G();e&&q(n),(n.find(e=>e.getAttribute(`aria-selected`)===`true`)??(e===`last`?n[n.length-1]:e?n[0]:void 0)??t.querySelector(`[autofocus]`)??n[0]??u(t)[0]??t).focus({preventScroll:!0})},Y=()=>{let e=c.focusRequest.value;return c.focusRequest.value=null,e},X=``,Z;(0,t.onScopeDispose)(()=>clearTimeout(Z));let re=(e,t,n)=>{X+=n.toLowerCase(),clearTimeout(Z),Z=setTimeout(()=>X=``,500);let r=[...X].every(e=>e===X[0])?X[0]:X,i=Math.max(t,0),a=[...e.slice(i),...e.slice(0,i)];return r.length===1&&t>=0&&a.push(a.shift()),a.find(e=>e.textContent?.trim().toLowerCase().startsWith(r))},Q=()=>{let e=[c];for(;m(e[e.length-1]);)e.push(e[e.length-1].parent);return e},$=(e,t,n)=>{for(let t of e)t.skipFocusReturn=!0,t.setOpen(!1,n);t?.focus({preventScroll:!0})},ie=e=>{let t=Q(),n=t[t.length-1],r=n.reference.value,i=e?r:(r&&d(r,e=>n.contains(e)))??r;$(t,i,`focus-out`)},ae=e=>{let{role:t}=i,n=C.value;if(!i.closeOnSelect||e.defaultPrevented||!n||!D(t))return;let r=e.target.closest(ne[t]);if(!r||r.closest(`[role="${t}"]`)!==n||r.matches(M)||t===`listbox`&&n.getAttribute(`aria-multiselectable`)===`true`)return;let a=t===`menu`?Q():[c];$(a,a[a.length-1].reference.value,`select`)},oe=e=>{let t=c.navigation.value;if(!t||e.defaultPrevented||e.isComposing||k(e.target))return;let n=G(),r=n.findIndex(t=>t.contains(e.target)),i=n.length-1,a=t===`menu`,o;if([`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key)&&q(n),e.key===`ArrowDown`)o=n[r<i?r+1:a?0:i];else if(e.key===`ArrowUp`)o=n[r>0?r-1:a||r<0?i:0];else if(e.key===`Home`)o=n[0];else if(e.key===`End`)o=n[i];else if(e.key===`Tab`&&t===`menu`){e.preventDefault(),ie(e.shiftKey);return}else if(t===`menu`&&m(c)&&C.value&&e.key===A(C.value).close){e.preventDefault(),c.setOpen(!1,`escape`);return}else if(e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.key!==` `||X))e.preventDefault(),o=re(n,r,e.key);else if((e.key===`Enter`||e.key===` `)&&e.target===n[r]){let t=n[r];if(t.matches(`button, a[href], input, summary`))return;e.preventDefault(),t.getAttribute(`aria-disabled`)!==`true`&&t.click();return}o&&(e.preventDefault(),o.focus())};return(0,t.watch)(f,e=>{let t=c.skipFocusReturn;if(c.skipFocusReturn=!1,e){S.value=!0;return}let n=document.activeElement;!t&&n&&c.floating.value?.contains(n)&&c.reference.value?.focus({preventScroll:!0})}),(0,t.watch)(()=>f.value&&c.isPositioned.value,async e=>{if(!e)return;let n=Y();(n||F.value)&&(await(0,t.nextTick)(),J(n))}),(0,t.watch)(c.focusRequest,e=>{e&&f.value&&c.isPositioned.value&&J(Y())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:i.teleport||`body`,disabled:i.teleport===!1},[S.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:w,style:(0,t.normalizeStyle)(N.value),onPointerenter:n[0]||=(...e)=>(0,t.unref)(c).hover&&(0,t.unref)(c).hover(...e),onPointerleave:n[1]||=(...e)=>(0,t.unref)(c).hover&&(0,t.unref)(c).hover(...e)},[I.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0},L,{onFocus:ee}),null,16)):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(t.Transition,(0,t.mergeProps)(R.value,{appear:``,onBeforeLeave:z,onAfterEnter:B,onAfterLeave:V}),{default:(0,t.withCtx)(()=>[(0,t.unref)(f)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(i.as),(0,t.mergeProps)({key:0},P(),{id:(0,t.unref)(g),ref:j,role:i.role??void 0,tabindex:F.value?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(b),"data-sbf-align":(0,t.unref)(x),onKeydown:oe,onClick:ae}),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`role`,`tabindex`,`data-sbf-side`,`data-sbf-align`])):(0,t.createCommentVNode)(``,!0)]),_:3},16),I.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:1},L,{onFocus:te}),null,16)):(0,t.createCommentVNode)(``,!0)],36)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});function P(){let e=(0,t.inject)(g,null);if(!e)throw Error(`[sb-floating-panel-vue] useSbFloating() must be called in a component inside <SbContainer>.`);let{isOpen:n,open:r,close:i,toggle:a}=e;return{isOpen:n,open:r,close:i,toggle:a}}e.SbContainer=w,e.SbFloating=N,e.SbReference=j,e.useSbFloating=P});

package/dist/types.d.ts

@@ -29,6 +29,7 @@ export type SbTrigger = 'click' | 'hover' | 'focus' | 'manual';
  * - `hover`: the pointer over the reference (`hover` trigger).
  * - `focus`: focus on the reference (`hover` and `focus` triggers).
  * - `api`: `v-model:open`, the slot props, the exposed methods or `useSbFloating()`.
+ * @deprecated The payload of the `open` event is removed in v6; the event stays.
  */
 export type SbOpenReason = 'trigger' | 'hover' | 'focus' | 'api';
 /**
@@ -43,6 +44,7 @@ export type SbOpenReason = 'trigger' | 'hover' | 'focus' | 'api';
  * - `disabled`: the container was disabled.
  * - `api`: `v-model:open`, the slot props, the exposed methods, `useSbFloating()`, or the
  *   reference unmounting.
+ * @deprecated The payload of the `close` event is removed in v6; the event stays.
  */
 export type SbCloseReason = 'trigger' | 'hover' | 'focus-out' | 'escape' | 'outside' | 'select' | 'detached' | 'disabled' | 'api';
 /**
@@ -145,26 +147,47 @@ export interface SbContainerSlotProps {
     toggle: () => void;
     /** Placement resolved by Floating UI, after `flip`. */
     placement: SbPlacement;
-    /** Side of the resolved placement. */
+    /**
+     * Side of the resolved placement.
+     * @deprecated Removed in v6: read it from `placement` (`placement.split('-')[0]`).
+     */
     side: SbSide;
-    /** Alignment of the resolved placement, `undefined` when centered. */
+    /**
+     * Alignment of the resolved placement, `undefined` when centered.
+     * @deprecated Removed in v6: read it from `placement` (`placement.split('-')[1]`).
+     */
     align: SbAlignment | undefined;
     /** `id` of the panel, e.g. for an `aria-describedby` of your own. */
     floatingId: string;
-    /** `id` of the reference, `undefined` until `SbReference` is set up. */
+    /**
+     * `id` of the reference, `undefined` until `SbReference` is set up.
+     * @deprecated Removed in v6: pass your own `id` to `SbReference`.
+     */
     referenceId: string | undefined;
 }
 /**
  * Methods exposed by `SbContainer` through a template ref.
  */
 export interface SbContainerExposed {
-    /** Whether the panel is open. */
+    /**
+     * Whether the panel is open.
+     * @deprecated Removed in v6: bind `v-model:open`.
+     */
     readonly isOpen: boolean;
-    /** Opens the panel. */
+    /**
+     * Opens the panel.
+     * @deprecated Removed in v6: set the `v-model:open` value to `true`.
+     */
     open: () => void;
-    /** Closes the panel. */
+    /**
+     * Closes the panel.
+     * @deprecated Removed in v6: set the `v-model:open` value to `false`.
+     */
     close: () => void;
-    /** Toggles the panel. */
+    /**
+     * Toggles the panel.
+     * @deprecated Removed in v6: toggle the `v-model:open` value.
+     */
     toggle: () => void;
     /** Recomputes the panel position. */
     update: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sb-floating-panel-vue",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Headless Vue 3 floating panel components (dropdowns, popovers, menus) powered by @floating-ui/vue: positioning, accessibility and open state handled, zero CSS shipped.",
   "keywords": [
     "vue",