0.9.0
Minor Changes
- Presence stacks default to native Popover, expose a host hit box and
--floating-presence-count, and add opt-inpause-on/ VuepauseTargetso gaps between stacked surfaces can keep pause.
Floating UI Plus publishes three coordinated packages. These release notes are
read directly from each package’s CHANGELOG.md, so the page stays aligned with
the versions shipped from this repository.
Published package
--floating-presence-count, and add opt-in pause-on / Vue pauseTarget so gaps between stacked surfaces can keep pause.aria-activedescendant while prior items disconnect.FloatingPresenceStack for bounded, pausable transient surface lifecycles while renderers retain control of exit presence and styling. Web Components add <floating-presence-stack> to render one declarative template, bind record values, expose raw stack state, and remove clones after their exit presence. Its template[slot="content"] contract matches floating-root, and top-layer="popover" gives every clone a native manual Popover lifecycle. Applications retain ARIA, focus, pause interaction, layout, and styling policy. A zero timeout now correctly keeps a framework-neutral stack record open until an explicit close. The shared stack now exposes a renderer-neutral context contract and setOptions(). Web Components accept partial code-first configuration through configure() / the options property, and Vue adds useFloatingPresenceStack() with matching actions and reactive state. Vue also exposes useFloatingTopLayer() so fixed, renderer-owned surfaces can use the same native Popover/Dialog lifecycle without introducing a framework specific Toast component. Native Dialog adapters now restore focus to the bound reference after close, including backdrop dismissal; direct controller users can opt into the same behavior with setRestoreFocusElement(reference). <floating-composite item-selector="…"> can discover consumer-owned controls directly, avoiding registration-only wrapper markup for dynamic templates. Web Components now infer dialog query semantics for <floating-query> inside a native <dialog>, while automatically generating option IDs when no prefix is provided. List discovery now uses standard aria-label or text content rather than the non-semantic data-label convenience attribute, and query/combobox status output now discovers the standard aria-live region by default. <floating-results> / FloatingResults are now the preferred declarative search-phase renderers; <floating-search> / FloatingSearch remain deprecated compatibility aliases. Web Components use one extensible <floating-results-status type="…"> element for idle, loading, error, and empty phase templates; the earlier phase-specific element names remain deprecated compatibility aliases. Vue floating content now preserves an application-provided id instead of overwriting it with a generated relationship ID.transformOrigin() middleware for reference-aware surface motion.createQuery(), useQuery(), or <floating-query> for query-driven result lists; set semantics to dialog or none when appropriate. The existing Combobox APIs remain as deprecated compatibility layers for selected-value and form-associated workflows.<dialog>, root-owned template, portal 사용 가이드를 실제 데모 동작에 맞게 보완합니다.USAGE.md를 Starlight의 통합 사용 가이드로 옮기고 배포 패키지에서는 제거합니다.floatingbeforeclose 이벤트와 Vue/Web의 onBeforeClose 콜백을 제공합니다.selectedValue form binding in the package READMEs.ComboboxController that composes search with input, IME, active-option ARIA, selection, and navigation behavior, including shared input, option, and navigation binding props for renderer adapters. Expose framework-neutral search phases for idle, loading, error, empty, and result rendering. A blank query reports results when its source returns items, reserving idle for a blank query without results. Re-export it from Web Components, add a renderless <floating-combobox> element with automatic virtual <floating-list> and <floating-list-item> option binding, and add a Vue useCombobox() adapter that consumes the same props so editable fuzzy-search examples no longer repeat event or ARIA wiring. Add createSearchRenderer() for direct DOM and Custom Element integrations. It owns the search subscription, phase dispatch, and bound-container updates while applications retain their own result nodes and state-specific copy. Add declarative <floating-search> phase templates for Web Components. It repeats result templates, binds item/search text, and supplies generated <floating-list-item> labels and values so consumers no longer write DOM factories or portal-mount rendering code. configure() also accepts phase-keyed status messages so live-region updates do not require an application-owned subscription or nested status conditionals. It can receive SearchOptions and own the resulting controller, allowing local fuzzy and async server sources to use the same declarative composition. An existing application-owned SearchController remains supported. Vue now provides the equivalent renderless FloatingSearch named-slot component, while useCombobox() exposes statusText and getQueryTriggerProps() from the same framework-neutral status and query binding contracts. When an existing result set refreshes or loads another page, its render phase remains results while loading is true, so Web, Web Components, and Vue can retain visible list items and present a non-blocking loading indicator. Document the same composition with local fuzzy and asynchronous server-search examples in both Web Components and Vue demos. Keep ordinary anchored examples in their local DOM and reserve floating-portal for surfaces that explicitly need a body-level layer. Add checked root lookup, own-root event subscriptions, and controller-backed closing to FloatingRootElement so direct DOM consumers do not need local lifecycle wrapper utilities. Add FloatingRootElement.configure() for setting middleware and plugin functions together without application-owned assignment helpers. Add a framework-neutral FloatingTopLayerController for native modal Dialog lifecycle. Native top layers are inferred from real <dialog> surfaces, so modal Web Components and Vue composition does not need a root-level top-layer setting; explicit values remain an escape hatch. Web Components use a root-owned <template slot="content"> for normal conditional surfaces, keeping them inert before Custom Element registration and promoting them to a native Popover where supported. A direct native dialog remains the exception because the browser already hides it while closed. data-fup-content remains as a compatibility alias for the public content slot. Allow floating-content to register as the nearest Web Components root's surface even when it is composed inside another behavior element such as floating-combobox. It remains available for advanced always-mounted composition, while ordinary overlays and combobox result surfaces use the portal/template pattern and retain native search phase templates. Add a framework-neutral combobox getItemValue() contract. Web Components floating-combobox is form-associated and submits its selected value through name, participates in required validation, and restores its configured selection on native form reset. Vue exposes the same selected value ref for a hidden native form input. Add framework-neutral external query activation and a declarative Web Components query-trigger-selector, so query preset buttons no longer repeat query, open, and input-focus event wiring or masquerade as result list items. Add declarative cursor-page controls to Web Components floating-search: template[data-search-more] renders only while another page is available, and its data-search-load-more control delegates to the shared SearchController.loadMore() lifecycle. Expose the shared search pending state on combobox input props as aria-busy and data-loading. Web Components mirrors it on the combobox host and bound input, while Vue adds a reactive combobox.loading projection for input-level pending UI. SearchOptions.source now also accepts an application-owned async request function directly. The package does not prescribe a network client, endpoint, response protocol, or pagination transport; the function adapts any chosen communication layer to the small search-page result shape.SearchController APIs, explain how Plus extends Floating UI, and make FloatingPortal follow the nearest FloatingRoot open state automatically so Vue consumers no longer need to repeat v-if or :active for floating surfaces.floating-list, and let data-fup-close controls close their owning floating surface without template mount listeners. Keep dynamically mounted nested portal targets inside modal focus traps so outside-elements-inert does not block their focus or pointer interactions.floating-content with native conditional templates. A floating-portal automatically marks its single owned template with data-fup-content; explicit markers support ambiguous portals and non-portal composition. Roots expose contentTemplate, and templates emit floatingmount and floatingunmount for fresh-clone initialization. Plugins and interaction properties assigned after a root connects now replace their active bindings, supporting applications that register Custom Elements before their configuration modules run. Ignore stale asynchronous position measurements after a reference or floating element unmounts.offset() as the user-requested visual gap when a Plus Arrow slot is present. The Web controller now adds the Arrow height on the main axis while preserving upstream offset() and arrow() behavior for renderers without a registered Arrow slot. Web Components and Vue register their Arrow element and height with the shared Floating context.role() patterns continue to override the default, and role({enabled: false}) opts out.open 상태와 독립적으로 target과 자식을 한 번만 준비하며, 열린 상태는 surface visibility로 반영합니다. Vue와 Web Components의 중첩 포털은 부모 포털 아래에 target을 만들고, 이동된 트리에는 루트·트리·부모 노드·스코프 컨텍스트를 다시 제공합니다. 포커스 매니저는 닫힘과 같은 틱에 언마운트되어도 트리거로 포커스를 복원합니다.data-fup-* namespace and expose a shared arrow marker across the framework-neutral, Web Components, and Vue packages. Vue's default arrow now also exposes its rendered SVG element for middleware composition while retaining slot-based visual customization.Published package
--floating-presence-count, and add opt-in pause-on / Vue pauseTarget so gaps between stacked surfaces can keep pause.aria-activedescendant while prior items disconnect.FloatingPresenceStack for bounded, pausable transient surface lifecycles while renderers retain control of exit presence and styling. Web Components add <floating-presence-stack> to render one declarative template, bind record values, expose raw stack state, and remove clones after their exit presence. Its template[slot="content"] contract matches floating-root, and top-layer="popover" gives every clone a native manual Popover lifecycle. Applications retain ARIA, focus, pause interaction, layout, and styling policy. A zero timeout now correctly keeps a framework-neutral stack record open until an explicit close. The shared stack now exposes a renderer-neutral context contract and setOptions(). Web Components accept partial code-first configuration through configure() / the options property, and Vue adds useFloatingPresenceStack() with matching actions and reactive state. Vue also exposes useFloatingTopLayer() so fixed, renderer-owned surfaces can use the same native Popover/Dialog lifecycle without introducing a framework specific Toast component. Native Dialog adapters now restore focus to the bound reference after close, including backdrop dismissal; direct controller users can opt into the same behavior with setRestoreFocusElement(reference). <floating-composite item-selector="…"> can discover consumer-owned controls directly, avoiding registration-only wrapper markup for dynamic templates. Web Components now infer dialog query semantics for <floating-query> inside a native <dialog>, while automatically generating option IDs when no prefix is provided. List discovery now uses standard aria-label or text content rather than the non-semantic data-label convenience attribute, and query/combobox status output now discovers the standard aria-live region by default. <floating-results> / FloatingResults are now the preferred declarative search-phase renderers; <floating-search> / FloatingSearch remain deprecated compatibility aliases. Web Components use one extensible <floating-results-status type="…"> element for idle, loading, error, and empty phase templates; the earlier phase-specific element names remain deprecated compatibility aliases. Vue floating content now preserves an application-provided id instead of overwriting it with a generated relationship ID.transformOrigin() middleware for reference-aware surface motion.top-layer="none" opts out for custom positioned or portal-based surfaces. - @floating-ui-plus/[email protected]top-layer="popover" or as="dialog"; ARIA roles no longer implicitly promote positioned content to the native Popover API. - @floating-ui-plus/[email protected]createQuery(), useQuery(), or <floating-query> for query-driven result lists; set semantics to dialog or none when appropriate. The existing Combobox APIs remain as deprecated compatibility layers for selected-value and form-associated workflows.<dialog>, root-owned template, portal 사용 가이드를 실제 데모 동작에 맞게 보완합니다.USAGE.md를 Starlight의 통합 사용 가이드로 옮기고 배포 패키지에서는 제거합니다.floatingbeforeclose 이벤트와 Vue/Web의 onBeforeClose 콜백을 제공합니다.selectedValue form binding in the package READMEs.ComboboxController that composes search with input, IME, active-option ARIA, selection, and navigation behavior, including shared input, option, and navigation binding props for renderer adapters. Expose framework-neutral search phases for idle, loading, error, empty, and result rendering. A blank query reports results when its source returns items, reserving idle for a blank query without results. Re-export it from Web Components, add a renderless <floating-combobox> element with automatic virtual <floating-list> and <floating-list-item> option binding, and add a Vue useCombobox() adapter that consumes the same props so editable fuzzy-search examples no longer repeat event or ARIA wiring. Add createSearchRenderer() for direct DOM and Custom Element integrations. It owns the search subscription, phase dispatch, and bound-container updates while applications retain their own result nodes and state-specific copy. Add declarative <floating-search> phase templates for Web Components. It repeats result templates, binds item/search text, and supplies generated <floating-list-item> labels and values so consumers no longer write DOM factories or portal-mount rendering code. configure() also accepts phase-keyed status messages so live-region updates do not require an application-owned subscription or nested status conditionals. It can receive SearchOptions and own the resulting controller, allowing local fuzzy and async server sources to use the same declarative composition. An existing application-owned SearchController remains supported. Vue now provides the equivalent renderless FloatingSearch named-slot component, while useCombobox() exposes statusText and getQueryTriggerProps() from the same framework-neutral status and query binding contracts. When an existing result set refreshes or loads another page, its render phase remains results while loading is true, so Web, Web Components, and Vue can retain visible list items and present a non-blocking loading indicator. Document the same composition with local fuzzy and asynchronous server-search examples in both Web Components and Vue demos. Keep ordinary anchored examples in their local DOM and reserve floating-portal for surfaces that explicitly need a body-level layer. Add checked root lookup, own-root event subscriptions, and controller-backed closing to FloatingRootElement so direct DOM consumers do not need local lifecycle wrapper utilities. Add FloatingRootElement.configure() for setting middleware and plugin functions together without application-owned assignment helpers. Add a framework-neutral FloatingTopLayerController for native modal Dialog lifecycle. Native top layers are inferred from real <dialog> surfaces, so modal Web Components and Vue composition does not need a root-level top-layer setting; explicit values remain an escape hatch. Web Components use a root-owned <template slot="content"> for normal conditional surfaces, keeping them inert before Custom Element registration and promoting them to a native Popover where supported. A direct native dialog remains the exception because the browser already hides it while closed. data-fup-content remains as a compatibility alias for the public content slot. Allow floating-content to register as the nearest Web Components root's surface even when it is composed inside another behavior element such as floating-combobox. It remains available for advanced always-mounted composition, while ordinary overlays and combobox result surfaces use the portal/template pattern and retain native search phase templates. Add a framework-neutral combobox getItemValue() contract. Web Components floating-combobox is form-associated and submits its selected value through name, participates in required validation, and restores its configured selection on native form reset. Vue exposes the same selected value ref for a hidden native form input. Add framework-neutral external query activation and a declarative Web Components query-trigger-selector, so query preset buttons no longer repeat query, open, and input-focus event wiring or masquerade as result list items. Add declarative cursor-page controls to Web Components floating-search: template[data-search-more] renders only while another page is available, and its data-search-load-more control delegates to the shared SearchController.loadMore() lifecycle. Expose the shared search pending state on combobox input props as aria-busy and data-loading. Web Components mirrors it on the combobox host and bound input, while Vue adds a reactive combobox.loading projection for input-level pending UI. SearchOptions.source now also accepts an application-owned async request function directly. The package does not prescribe a network client, endpoint, response protocol, or pagination transport; the function adapts any chosen communication layer to the small search-page result shape.SearchController APIs, explain how Plus extends Floating UI, and make FloatingPortal follow the nearest FloatingRoot open state automatically so Vue consumers no longer need to repeat v-if or :active for floating surfaces.floating-content with native conditional templates. A floating-portal automatically marks its single owned template with data-fup-content; explicit markers support ambiguous portals and non-portal composition. Roots expose contentTemplate, and templates emit floatingmount and floatingunmount for fresh-clone initialization. Plugins and interaction properties assigned after a root connects now replace their active bindings, supporting applications that register Custom Elements before their configuration modules run. Ignore stale asynchronous position measurements after a reference or floating element unmounts.floating-list, and let data-fup-close controls close their owning floating surface without template mount listeners. Keep dynamically mounted nested portal targets inside modal focus traps so outside-elements-inert does not block their focus or pointer interactions.role() patterns continue to override the default, and role({enabled: false}) opts out.offset() as the user-requested visual gap when a Plus Arrow slot is present. The Web controller now adds the Arrow height on the main axis while preserving upstream offset() and arrow() behavior for renderers without a registered Arrow slot. Web Components and Vue register their Arrow element and height with the shared Floating context.open 상태와 독립적으로 target과 자식을 한 번만 준비하며, 열린 상태는 surface visibility로 반영합니다. Vue와 Web Components의 중첩 포털은 부모 포털 아래에 target을 만들고, 이동된 트리에는 루트·트리·부모 노드·스코프 컨텍스트를 다시 제공합니다. 포커스 매니저는 닫힘과 같은 틱에 언마운트되어도 트리거로 포커스를 복원합니다.data-fup-* namespace and expose a shared arrow marker across the framework-neutral, Web Components, and Vue packages. Vue's default arrow now also exposes its rendered SVG element for middleware composition while retaining slot-based visual customization.Published package
--floating-presence-count, and add opt-in pause-on / Vue pauseTarget so gaps between stacked surfaces can keep pause.FloatingPresenceStack for bounded, pausable transient surface lifecycles while renderers retain control of exit presence and styling. Web Components add <floating-presence-stack> to render one declarative template, bind record values, expose raw stack state, and remove clones after their exit presence. Its template[slot="content"] contract matches floating-root, and top-layer="popover" gives every clone a native manual Popover lifecycle. Applications retain ARIA, focus, pause interaction, layout, and styling policy. A zero timeout now correctly keeps a framework-neutral stack record open until an explicit close. The shared stack now exposes a renderer-neutral context contract and setOptions(). Web Components accept partial code-first configuration through configure() / the options property, and Vue adds useFloatingPresenceStack() with matching actions and reactive state. Vue also exposes useFloatingTopLayer() so fixed, renderer-owned surfaces can use the same native Popover/Dialog lifecycle without introducing a framework specific Toast component. Native Dialog adapters now restore focus to the bound reference after close, including backdrop dismissal; direct controller users can opt into the same behavior with setRestoreFocusElement(reference). <floating-composite item-selector="…"> can discover consumer-owned controls directly, avoiding registration-only wrapper markup for dynamic templates. Web Components now infer dialog query semantics for <floating-query> inside a native <dialog>, while automatically generating option IDs when no prefix is provided. List discovery now uses standard aria-label or text content rather than the non-semantic data-label convenience attribute, and query/combobox status output now discovers the standard aria-live region by default. <floating-results> / FloatingResults are now the preferred declarative search-phase renderers; <floating-search> / FloatingSearch remain deprecated compatibility aliases. Web Components use one extensible <floating-results-status type="…"> element for idle, loading, error, and empty phase templates; the earlier phase-specific element names remain deprecated compatibility aliases. Vue floating content now preserves an application-provided id instead of overwriting it with a generated relationship ID.transformOrigin() middleware for reference-aware surface motion.top-layer="none" opts out for custom positioned or portal-based surfaces. - @floating-ui-plus/[email protected]top-layer="popover" or as="dialog"; ARIA roles no longer implicitly promote positioned content to the native Popover API. - @floating-ui-plus/[email protected]createQuery(), useQuery(), or <floating-query> for query-driven result lists; set semantics to dialog or none when appropriate. The existing Combobox APIs remain as deprecated compatibility layers for selected-value and form-associated workflows.<dialog>, root-owned template, portal 사용 가이드를 실제 데모 동작에 맞게 보완합니다.USAGE.md를 Starlight의 통합 사용 가이드로 옮기고 배포 패키지에서는 제거합니다.floatingbeforeclose 이벤트와 Vue/Web의 onBeforeClose 콜백을 제공합니다.selectedValue form binding in the package READMEs.ComboboxController that composes search with input, IME, active-option ARIA, selection, and navigation behavior, including shared input, option, and navigation binding props for renderer adapters. Expose framework-neutral search phases for idle, loading, error, empty, and result rendering. A blank query reports results when its source returns items, reserving idle for a blank query without results. Re-export it from Web Components, add a renderless <floating-combobox> element with automatic virtual <floating-list> and <floating-list-item> option binding, and add a Vue useCombobox() adapter that consumes the same props so editable fuzzy-search examples no longer repeat event or ARIA wiring. Add createSearchRenderer() for direct DOM and Custom Element integrations. It owns the search subscription, phase dispatch, and bound-container updates while applications retain their own result nodes and state-specific copy. Add declarative <floating-search> phase templates for Web Components. It repeats result templates, binds item/search text, and supplies generated <floating-list-item> labels and values so consumers no longer write DOM factories or portal-mount rendering code. configure() also accepts phase-keyed status messages so live-region updates do not require an application-owned subscription or nested status conditionals. It can receive SearchOptions and own the resulting controller, allowing local fuzzy and async server sources to use the same declarative composition. An existing application-owned SearchController remains supported. Vue now provides the equivalent renderless FloatingSearch named-slot component, while useCombobox() exposes statusText and getQueryTriggerProps() from the same framework-neutral status and query binding contracts. When an existing result set refreshes or loads another page, its render phase remains results while loading is true, so Web, Web Components, and Vue can retain visible list items and present a non-blocking loading indicator. Document the same composition with local fuzzy and asynchronous server-search examples in both Web Components and Vue demos. Keep ordinary anchored examples in their local DOM and reserve floating-portal for surfaces that explicitly need a body-level layer. Add checked root lookup, own-root event subscriptions, and controller-backed closing to FloatingRootElement so direct DOM consumers do not need local lifecycle wrapper utilities. Add FloatingRootElement.configure() for setting middleware and plugin functions together without application-owned assignment helpers. Add a framework-neutral FloatingTopLayerController for native modal Dialog lifecycle. Native top layers are inferred from real <dialog> surfaces, so modal Web Components and Vue composition does not need a root-level top-layer setting; explicit values remain an escape hatch. Web Components use a root-owned <template slot="content"> for normal conditional surfaces, keeping them inert before Custom Element registration and promoting them to a native Popover where supported. A direct native dialog remains the exception because the browser already hides it while closed. data-fup-content remains as a compatibility alias for the public content slot. Allow floating-content to register as the nearest Web Components root's surface even when it is composed inside another behavior element such as floating-combobox. It remains available for advanced always-mounted composition, while ordinary overlays and combobox result surfaces use the portal/template pattern and retain native search phase templates. Add a framework-neutral combobox getItemValue() contract. Web Components floating-combobox is form-associated and submits its selected value through name, participates in required validation, and restores its configured selection on native form reset. Vue exposes the same selected value ref for a hidden native form input. Add framework-neutral external query activation and a declarative Web Components query-trigger-selector, so query preset buttons no longer repeat query, open, and input-focus event wiring or masquerade as result list items. Add declarative cursor-page controls to Web Components floating-search: template[data-search-more] renders only while another page is available, and its data-search-load-more control delegates to the shared SearchController.loadMore() lifecycle. Expose the shared search pending state on combobox input props as aria-busy and data-loading. Web Components mirrors it on the combobox host and bound input, while Vue adds a reactive combobox.loading projection for input-level pending UI. SearchOptions.source now also accepts an application-owned async request function directly. The package does not prescribe a network client, endpoint, response protocol, or pagination transport; the function adapts any chosen communication layer to the small search-page result shape.SearchController APIs, explain how Plus extends Floating UI, and make FloatingPortal follow the nearest FloatingRoot open state automatically so Vue consumers no longer need to repeat v-if or :active for floating surfaces.FloatingClose so conventional Vue menus, dialogs, and Comboboxes no longer need manual element-ref arrays, roving tabindex state, or close handlers. Keep nested Teleport targets inside modal focus traps so pointer interaction and focus restoration continue to work with subtree isolation.role() patterns continue to override the default, and role({enabled: false}) opts out.offset() as the user-requested visual gap when a Plus Arrow slot is present. The Web controller now adds the Arrow height on the main axis while preserving upstream offset() and arrow() behavior for renderers without a registered Arrow slot. Web Components and Vue register their Arrow element and height with the shared Floating context.open 상태와 독립적으로 target과 자식을 한 번만 준비하며, 열린 상태는 surface visibility로 반영합니다. Vue와 Web Components의 중첩 포털은 부모 포털 아래에 target을 만들고, 이동된 트리에는 루트·트리·부모 노드·스코프 컨텍스트를 다시 제공합니다. 포커스 매니저는 닫힘과 같은 틱에 언마운트되어도 트리거로 포커스를 복원합니다.data-fup-* namespace and expose a shared arrow marker across the framework-neutral, Web Components, and Vue packages. Vue's default arrow now also exposes its rendered SVG element for middleware composition while retaining slot-based visual customization.undefined for optional properties with exactOptionalPropertyTypes@floating-ui/[email protected], @floating-ui/[email protected]vue-demi package (see Deprecation Warning), ending support for Vue 2 and Vue <3.3.0@floating-ui/[email protected], @floating-ui/[email protected]@floating-ui/[email protected]@floating-ui/[email protected]@floating-ui/[email protected]@floating-ui/[email protected], @floating-ui/[email protected]@floating-ui/[email protected]isPositioned to true when open is false@floating-ui/[email protected]@floating-ui/[email protected]@floating-ui/[email protected]@floating-ui/[email protected]MaybeReadonlyRefOrGetter works in earlier versions of VueMaybeReadonlyRefOrGetter in useFloating@floating-ui/[email protected]@floating-ui/[email protected]@floating-ui/[email protected]@floating-ui/[email protected]isComponentPublicInstance implementation