fix(core): FloatingPopover escapes a transformed ancestor's containing block; native Select mode

[dvcolomban]

What changed

• FloatingPopover resolves the outermost ancestor that forms a containing block for position: fixed descendants and <Teleport>s its panel into that ancestor's parent. With no such ancestor, it renders in place as before.
• New surface prop on FloatingPopover, tooltip (default) or menu. menu renders p0 bg-glass:25 border-#8883 in place of px2 p1 bg-glass:80 border-base.
• Select gains native, rendering a real <select> instead of the custom listbox. It has no icon, description or searchable support.
• Select's dropdown now uses surface="menu" and gap: 4, colours the selected option with primary and the active row with surfaceBadge, and no longer passes !p0 in panelClass.
• webcomponents API snapshot updated for SelectProps.native.

Why it changed

A position: fixed panel is positioned relative to its nearest ancestor carrying a non-none transform or filter, not the viewport, and is clipped by that ancestor's overflow. Rendered inside such a panel, the Select dropdown was offset from its trigger and cut off — unusable. Escaping the outermost rather than the nearest such ancestor matters because escaping one can land inside another. The teleport target stays inside the shadow root, since that is where the panel's stylesheet is adopted and document.body would strip its styling.

The menu surface exists because a floating panel stacks over an already-tinted surface, where tooltip-strength glass composites to near-black, and because tooltip padding is wrong for a listbox — it inset the options and made the panel wider than its trigger.

native is an escape hatch worth having regardless of the fix above: the browser draws a native option list outside the page's layout, so no ancestor can clip or misposition it at all, which is the dependable choice for a Select embedded in a host layout this component doesn't control. Its option list needs no styling here, as ColorSchemeRoot already sets color-scheme inline and that inherits.

[pkg-pr-new]

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@518

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@518

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@518

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@518

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@518

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@518

commit: e6153ad