v0.15.0

PortalProvider, and that is the one to read: several apps sharing one page, such as windows in a desktop-like shell or a widget embedded in someone else's site, can now each keep their overlays to themselves. Before this, one app's modal made the whole page inert and froze every other window.

Added

• PortalProvider (ropav/portal-provider) keeps overlays inside one part of the page. It takes a container and a root, and renders no element of its own.
  • Every overlay below it renders into the container: modals, alert dialogs, drawers, popovers, menus, the listboxes of pickers, tooltips and toast regions.
  • A modal makes only the root inert, and holds focus and outside presses only within it. Popovers and tooltips stay inside the root too.
  • A modal in one window no longer covers a modal in another, and Esc closes each in its own window.
  • A component's own portal-container still wins. A nested provider inherits whatever it leaves out, and null goes back to the whole document.
  • usePortal and providePortal do the same thing as composables.
  • See Inside one part of the page.
• A modal, alert dialog or drawer in a container sizes to that container. Their CSS now falls back to 100% when --visual-viewport-* is not set.

Fixed

• A narrow search field keeps its clear button inside it. In a sidebar of about 220–280px, the <input> would not shrink below roughly twenty characters, so it pushed the clear button out past the edge, where it was cut off. The same happened to the suffix of an input group or a colour field. Each control now carries min-width: 0.
• A Meter no longer fails axe. The root used the fallback role list role="meter progressbar". axe-core 4.13 read that as an unknown role and reported every aria-value* attribute as a critical aria-allowed-attr. The root is now a plain role="meter".

Built and tested against vue 3.6.0-rc.10; the peer range still starts at rc.8.

npm i ropav@0.15.0

Full changelog: v0.14.0...v0.15.0