@surflane/ui 0.4.0 → 0.5.0

package/dist/menu.d.ts

@@ -6,10 +6,13 @@ declare const MenuPopup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("
 declare const MenuPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const MenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "align" | "side" | "sideOffset" | "collisionPadding"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & React.RefAttributes<HTMLDivElement>>;
 declare const MenuTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuTriggerProps<unknown> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
+declare const MenuPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Menu: {
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "align" | "side" | "sideOffset" | "collisionPadding"> & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & React.RefAttributes<HTMLDivElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
@@ -46,7 +49,6 @@ export declare const Menu: {
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     RadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Root: typeof BaseMenu.Root;
     SubmenuRoot: typeof BaseMenu.SubmenuRoot;
@@ -59,7 +61,7 @@ export declare const Menu: {
     Empty: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     useFilter: typeof BaseMenu.useFilter;
 };
-export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent };
+export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent, MenuPortal };
 export declare const MenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, MenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, MenuClear: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, MenuEmpty: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuFilterProvider: typeof BaseMenu.FilterProvider, MenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -70,7 +72,7 @@ export declare const MenuArrow: React.ForwardRefExoticComponent<Omit<import("@ba
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, MenuLinkItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLAnchorElement>>, MenuList: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+} & React.RefAttributes<HTMLAnchorElement>>, MenuList: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, MenuRadioItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, MenuRoot: typeof BaseMenu.Root, MenuSeparator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;

package/dist/menu.js

@@ -1,18 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
-import { skin, part } from './parts.js';
-const MenuPopup = /* @__PURE__ */ part(BaseMenu.Popup, 'pui-menu');
-const MenuPositioner = /* @__PURE__ */ part(BaseMenu.Positioner, 'pui-positioner');
+import { OwnPortal, part, scopedPortal, skin } from './parts.js';
+const MenuPopup = /* @__PURE__ */ part(BaseMenu.Popup, 'pui-menu', { portal: true });
+const MenuPositioner = /* @__PURE__ */ part(BaseMenu.Positioner, 'pui-positioner', { portal: true });
 const MenuContent = /* @__PURE__ */ React.forwardRef(function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
-    return (_jsx(MenuPositioner, { align: align, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, children: _jsx(MenuPopup, { ...props, ref: ref, className: className }) }));
+    return (_jsx(OwnPortal, { portal: BaseMenu.Portal, children: _jsx(MenuPositioner, { align: align, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, children: _jsx(MenuPopup, { ...props, ref: ref, className: className }) }) }));
 });
 const MenuTrigger = /* @__PURE__ */ React.forwardRef(function MenuTrigger({ className, ...props }, ref) {
     return (_jsx(BaseMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-menu-trigger', className) }));
 });
 const CheckboxIndicator = /* @__PURE__ */ React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
-    return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) })) }));
+    return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? _jsx(Icon, { name: 'check' }) }));
 });
 const RadioIndicator = /* @__PURE__ */ React.forwardRef(function RadioIndicator({ className, children, ...props }, ref) {
     return (_jsx(BaseMenu.RadioItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("circle", { cx: '12', cy: '12', r: '4' }) })) }));
@@ -20,10 +21,13 @@ const RadioIndicator = /* @__PURE__ */ React.forwardRef(function RadioIndicator(
 const SubmenuTrigger = /* @__PURE__ */ React.forwardRef(function SubmenuTrigger({ className, children, indicator, ...props }, ref) {
     return (_jsxs(BaseMenu.SubmenuTrigger, { ...props, ref: ref, className: skin('pui-menu-item pui-menu-submenu-trigger', className), children: [children, indicator === false
                 ? null
-                : (indicator ?? (_jsx("svg", { className: 'pui-submenu-arrow', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) })))] }));
+                : (indicator ?? (_jsx(Icon, { name: 'chevron-forward', className: 'pui-submenu-arrow' })))] }));
 });
+/** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
+const MenuPortal = /* @__PURE__ */ scopedPortal(BaseMenu.Portal);
 export const Menu = {
     ...BaseMenu,
+    Portal: MenuPortal,
     Content: MenuContent,
     Popup: MenuPopup,
     Positioner: MenuPositioner,
@@ -40,5 +44,5 @@ export const Menu = {
     Input: /* @__PURE__ */ part(BaseMenu.Input, 'pui-input'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent };
-export const { Arrow: MenuArrow, Backdrop: MenuBackdrop, CheckboxItem: MenuCheckboxItem, CheckboxItemIndicator: MenuCheckboxItemIndicator, Clear: MenuClear, Empty: MenuEmpty, FilterProvider: MenuFilterProvider, Group: MenuGroup, GroupLabel: MenuGroupLabel, Handle: MenuHandle, Input: MenuInput, Item: MenuItem, LinkItem: MenuLinkItem, List: MenuList, Portal: MenuPortal, RadioGroup: MenuRadioGroup, RadioItem: MenuRadioItem, RadioItemIndicator: MenuRadioItemIndicator, Root: MenuRoot, Separator: MenuSeparator, SubmenuRoot: MenuSubmenuRoot, SubmenuTrigger: MenuSubmenuTrigger, Viewport: MenuViewport, } = Menu;
+export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent, MenuPortal };
+export const { Arrow: MenuArrow, Backdrop: MenuBackdrop, CheckboxItem: MenuCheckboxItem, CheckboxItemIndicator: MenuCheckboxItemIndicator, Clear: MenuClear, Empty: MenuEmpty, FilterProvider: MenuFilterProvider, Group: MenuGroup, GroupLabel: MenuGroupLabel, Handle: MenuHandle, Input: MenuInput, Item: MenuItem, LinkItem: MenuLinkItem, List: MenuList, RadioGroup: MenuRadioGroup, RadioItem: MenuRadioItem, RadioItemIndicator: MenuRadioItemIndicator, Root: MenuRoot, Separator: MenuSeparator, SubmenuRoot: MenuSubmenuRoot, SubmenuTrigger: MenuSubmenuTrigger, Viewport: MenuViewport, } = Menu;

package/dist/menubar.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const Menubar: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menubar").MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/menubar.js

@@ -0,0 +1,4 @@
+'use client';
+import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
+import { part } from './parts.js';
+export const Menubar = /* @__PURE__ */ part(BaseMenubar, 'pui-menubar');

package/dist/meter.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const Meter: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, MeterLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, MeterRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, MeterTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, MeterValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/meter.js

@@ -0,0 +1,13 @@
+'use client';
+import { Meter as BaseMeter } from '@base-ui/react/meter';
+import { part } from './parts.js';
+export const Meter = {
+    ...BaseMeter,
+    Root: /* @__PURE__ */ part(BaseMeter.Root, 'pui-gauge pui-meter'),
+    Label: /* @__PURE__ */ part(BaseMeter.Label, 'pui-gauge-label'),
+    Value: /* @__PURE__ */ part(BaseMeter.Value, 'pui-gauge-value'),
+    Track: /* @__PURE__ */ part(BaseMeter.Track, 'pui-gauge-track'),
+    Indicator: /* @__PURE__ */ part(BaseMeter.Indicator, 'pui-gauge-indicator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Indicator: MeterIndicator, Label: MeterLabel, Root: MeterRoot, Track: MeterTrack, Value: MeterValue, } = Meter;

package/dist/native-select.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+/** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
+export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "size" | "multiple"> & {
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function NativeSelectOption(props: React.ComponentProps<'option'>): React.JSX.Element;
+export declare function NativeSelectOptGroup(props: React.ComponentProps<'optgroup'>): React.JSX.Element;

package/dist/native-select.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Select } from './select.js';
+function optionList(children) {
+    return React.Children.toArray(children).flatMap((child) => {
+        if (!React.isValidElement(child))
+            return [];
+        const p = child.props;
+        if (child.type === React.Fragment)
+            return optionList(p.children);
+        // An optgroup keeps its label as a visible group heading.
+        if (child.type === 'optgroup' || child.type === NativeSelectOptGroup)
+            return [
+                {
+                    label: p.label,
+                    options: optionList(p.children).flatMap((item) => 'options' in item ? item.options : [item]),
+                },
+            ];
+        return [
+            {
+                value: String(p.value ?? p.children ?? ''),
+                label: p.label ?? p.children,
+                disabled: p.disabled,
+            },
+        ];
+    });
+}
+/** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
+export const NativeSelect = /* @__PURE__ */ React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
+    const input = React.useRef(null);
+    const options = optionList(children);
+    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-invalid": props['aria-invalid'], onValueChange: (next) => {
+            if (!onChange)
+                return;
+            const target = input.current;
+            if (!target)
+                return;
+            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+            setter?.call(target, next);
+            const event = new Event('change', { bubbles: true });
+            Object.defineProperties(event, {
+                target: { value: target },
+                currentTarget: { value: target },
+            });
+            onChange(event);
+        } }));
+});
+export function NativeSelectOption(props) {
+    return _jsx("option", { ...props });
+}
+export function NativeSelectOptGroup(props) {
+    return _jsx("optgroup", { ...props });
+}

package/dist/navigation-menu.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
 import { part, skin } from './parts.js';
 function Root(props) {
@@ -10,7 +11,7 @@ function Root(props) {
 const Trigger = /* @__PURE__ */ React.forwardRef(function Trigger({ className, children, indicator, ...props }, ref) {
     return (_jsxs(BaseNavigationMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-navigation-trigger', className), children: [children, indicator === false
                 ? null
-                : (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: 'pui-navigation-icon', children: _jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) }) })))] }));
+                : (indicator ?? (_jsx(BaseNavigationMenu.Icon, { className: 'pui-navigation-icon', children: _jsx(Icon, { name: 'chevron-down' }) })))] }));
 });
 export const NavigationMenu = {
     ...BaseNavigationMenu,
@@ -20,11 +21,13 @@ export const NavigationMenu = {
     Item: /* @__PURE__ */ part(BaseNavigationMenu.Item, 'pui-navigation-item'),
     Link: /* @__PURE__ */ part(BaseNavigationMenu.Link, 'pui-navigation-link'),
     Content: /* @__PURE__ */ part(BaseNavigationMenu.Content, 'pui-navigation-content'),
-    Positioner: /* @__PURE__ */ part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner'),
-    Popup: /* @__PURE__ */ part(BaseNavigationMenu.Popup, 'pui-navigation-popup'),
+    Positioner: /* @__PURE__ */ part(BaseNavigationMenu.Positioner, 'pui-positioner pui-navigation-positioner', {
+        portal: true,
+    }),
+    Popup: /* @__PURE__ */ part(BaseNavigationMenu.Popup, 'pui-navigation-popup', { portal: true }),
     Viewport: /* @__PURE__ */ part(BaseNavigationMenu.Viewport, 'pui-navigation-viewport'),
-    Icon: /* @__PURE__ */ React.forwardRef(function Icon({ children, className, ...props }, ref) {
-        return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin('pui-navigation-icon', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) })) }));
+    Icon: /* @__PURE__ */ React.forwardRef(function NavigationMenuIcon({ children, className, ...props }, ref) {
+        return (_jsx(BaseNavigationMenu.Icon, { ...props, ref: ref, className: skin('pui-navigation-icon', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));
     }),
 };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/number-field.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export declare const NumberField: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Increment: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Decrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLInputElement>>;
+    ScrubArea: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    ScrubAreaCursor: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, NumberFieldGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, NumberFieldIncrement: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, NumberFieldInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLInputElement>>, NumberFieldRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/number-field").NumberFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/number-field.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { part, skin } from './parts.js';
+import { useRootRef, useResetValue } from './form-state.js';
+const NumberRoot = /* @__PURE__ */ React.forwardRef(function NumberRoot({ value, defaultValue, onValueChange, className, form, ...props }, ref) {
+    const [element, attach] = useRootRef(ref);
+    const [numeric, setNumeric] = useResetValue(value, defaultValue ?? null, element, form);
+    return (_jsx(BaseNumberField.Root, { ...props, form: form, ref: attach, value: numeric, className: skin('pui-number-field', className), onValueChange: (next, event) => {
+            onValueChange?.(next, event);
+            if (value === undefined && !event.isCanceled)
+                setNumeric(next);
+        } }));
+});
+const NumberIncrement = /* @__PURE__ */ React.forwardRef(function NumberIncrement({ className, children, ...props }, ref) {
+    return (_jsx(BaseNumberField.Increment, { "aria-label": 'Increase value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Icon, { name: 'plus' }) }));
+});
+const NumberDecrement = /* @__PURE__ */ React.forwardRef(function NumberDecrement({ className, children, ...props }, ref) {
+    return (_jsx(BaseNumberField.Decrement, { "aria-label": 'Decrease value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Icon, { name: 'minus' }) }));
+});
+export const NumberField = {
+    ...BaseNumberField,
+    Root: NumberRoot,
+    Increment: NumberIncrement,
+    Decrement: NumberDecrement,
+    Group: /* @__PURE__ */ part(BaseNumberField.Group, 'pui-number-group'),
+    Input: /* @__PURE__ */ part(BaseNumberField.Input, 'pui-number-input'),
+    ScrubArea: /* @__PURE__ */ part(BaseNumberField.ScrubArea, 'pui-number-scrub'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Decrement: NumberFieldDecrement, Group: NumberFieldGroup, Increment: NumberFieldIncrement, Input: NumberFieldInput, Root: NumberFieldRoot, ScrubArea: NumberFieldScrubArea, ScrubAreaCursor: NumberFieldScrubAreaCursor, } = NumberField;

package/dist/page-header.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare function PageHeader({ as: Root, headingProps, actionsLabel, title, description, breadcrumb, actions, level, size, className, ...props }: Omit<React.ComponentProps<'div'>, 'title'> & {
+    as?: 'div' | 'header';
+    headingProps?: Omit<React.HTMLAttributes<HTMLHeadingElement>, 'children' | 'dangerouslySetInnerHTML'>;
+    actionsLabel?: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    breadcrumb?: React.ReactNode;
+    actions?: React.ReactNode;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 'title' | 'page' | 'workspace' | 'document';
+}): React.JSX.Element;

package/dist/page-header.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './parts.js';
+import { Heading, Text } from './typography.js';
+export function PageHeader({ as: Root = 'div', headingProps, actionsLabel, title, description, breadcrumb, actions, level = 1, size = 'title', className, ...props }) {
+    return (_jsxs(Root, { ...props, className: cx('pui-page-header', className), children: [breadcrumb != null && breadcrumb !== false && breadcrumb !== '' && (_jsx("div", { className: 'pui-page-header-breadcrumb', children: breadcrumb })), _jsxs("div", { className: 'pui-page-header-content', children: [_jsxs("div", { className: 'pui-page-header-copy', children: [_jsx(Heading, { ...headingProps, level: level, size: size, children: title }), description != null &&
+                                description !== false &&
+                                description !== '' && (_jsx(Text, { color: 'secondary', className: 'pui-page-header-description', children: description }))] }), actions != null && actions !== false && actions !== '' && (_jsx("div", { className: 'pui-page-header-actions', role: actionsLabel ? 'group' : undefined, "aria-label": actionsLabel, children: actions }))] })] }));
+}

package/dist/pagination.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { Button } from './button.js';
-function Chevron({ next = false }) {
-    return (_jsx("svg", { className: 'pui-pagination-arrow', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: next ? 'm9 6 6 6-6 6' : 'm15 6-6 6 6 6' }) }));
-}
+import { cx } from './parts.js';
 export const Pagination = /* @__PURE__ */ React.forwardRef(function Pagination({ page, pageCount, siblings = 1, disabled = false, labels, getPageHref, onPageChange, className, 'aria-label': ariaLabel = 'Pagination', ...props }, ref) {
     const count = Number.isFinite(pageCount)
         ? Math.min(Number.MAX_SAFE_INTEGER, Math.max(0, Math.floor(pageCount)))
@@ -40,5 +39,5 @@ export const Pagination = /* @__PURE__ */ React.forwardRef(function Pagination({
                     onPageChange?.(target);
             }, children: children }));
     }
-    return (_jsxs("nav", { ...props, ref: ref, "aria-label": ariaLabel, className: ['pui-pagination', className].filter(Boolean).join(' '), children: [control(Math.max(1, current - 1), labels?.previous ?? 'Previous page', _jsxs(_Fragment, { children: [_jsx(Chevron, {}), _jsx("span", { children: labels?.previous ?? 'Previous page' })] }), current === 1), _jsx("span", { className: 'pui-pagination-summary', children: labels?.summary?.(current, count) ?? `Page ${current} of ${count}` }), _jsx("ul", { role: 'list', className: 'pui-pagination-list', children: items.map((item) => (_jsx("li", { children: typeof item === 'number' ? (control(item, labels?.page?.(item) ?? `Page ${item}`, item)) : (_jsxs("span", { className: 'pui-pagination-gap', children: [_jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: [_jsx("circle", { cx: '5', cy: '12', r: '1.5' }), _jsx("circle", { cx: '12', cy: '12', r: '1.5' }), _jsx("circle", { cx: '19', cy: '12', r: '1.5' })] }), _jsx("span", { className: 'pui-feedback-sr', children: labels?.more ?? 'More pages' })] })) }, item))) }), control(Math.min(count, current + 1), labels?.next ?? 'Next page', _jsxs(_Fragment, { children: [_jsx("span", { children: labels?.next ?? 'Next page' }), _jsx(Chevron, { next: true })] }), current === count)] }));
+    return (_jsxs("nav", { ...props, ref: ref, "aria-label": ariaLabel, className: cx('pui-pagination', className), children: [control(Math.max(1, current - 1), labels?.previous ?? 'Previous page', _jsxs(_Fragment, { children: [_jsx(Icon, { name: 'chevron-back', className: 'pui-pagination-arrow' }), _jsx("span", { children: labels?.previous ?? 'Previous page' })] }), current === 1), _jsx("span", { className: 'pui-pagination-summary', children: labels?.summary?.(current, count) ?? `Page ${current} of ${count}` }), _jsx("ul", { role: 'list', className: 'pui-pagination-list', children: items.map((item) => (_jsx("li", { children: typeof item === 'number' ? (control(item, labels?.page?.(item) ?? `Page ${item}`, item)) : (_jsxs("span", { className: 'pui-pagination-gap', children: [_jsx(Icon, { name: 'more' }), _jsx("span", { className: 'pui-feedback-sr', children: labels?.more ?? 'More pages' })] })) }, item))) }), control(Math.min(count, current + 1), labels?.next ?? 'Next page', _jsxs(_Fragment, { children: [_jsx("span", { children: labels?.next ?? 'Next page' }), _jsx(Icon, { name: 'chevron-forward', className: 'pui-pagination-arrow' })] }), current === count)] }));
 });

package/dist/panel.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+export type PanelSide = 'left' | 'right' | 'top' | 'bottom';
+export type PanelOptions = {
+    size?: ComponentSizeAlias;
+    closeLabel?: string;
+    /** Attaches the panel to its edge: no gap, and square corners on that edge, as a
+     * mobile bottom sheet sits. */
+    flush?: boolean;
+};
+export declare function Header({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export declare const Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function Footer({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/panel.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx } from './parts.js';
+export function Header({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx('pui-panel-header', className) });
+}
+export const Body = /* @__PURE__ */ React.forwardRef(function Body({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-panel-body', className) }));
+});
+export function Footer({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx('pui-panel-footer', className) });
+}

package/dist/parts.d.ts

@@ -1,12 +1,30 @@
 import { type ComponentSize } from './sizing.js';
 import * as React from 'react';
+/** Joins class names, skipping empty ones. */
+export declare function cx(...classes: (string | false | null | undefined)[]): string;
 /** The data-size value: a short alias (sm, md, lg) renders as its full name, so both
  * spellings meet the same CSS; other values such as xs or icon pass through. */
 export declare function sizeName<Size extends string>(size?: Size): ComponentSize | Size | undefined;
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export declare function skin<State>(base: string, custom?: string | ((state: State) => string | undefined)): string | ((state: State) => string);
+/** A styled Base UI part or element. A portal part renders outside the tree that sets
+ * data-ui-size, so it always carries the size scheme; other parts carry it only when
+ * size is set. */
 export declare function part<Element extends HTMLElement, Props extends {
     className?: unknown;
-}>(Component: React.ElementType, base: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, "size"> & {
+}>(Component: React.ElementType, base: string, { portal }?: {
+    portal?: boolean;
+}): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, "size"> & {
     size?: ComponentSize;
 }> & React.RefAttributes<Element>>;
+/** A namespace Portal that marks its subtree as already portalled. */
+export declare function scopedPortal<Portal extends React.ElementType>(BasePortal: Portal): Portal;
+/** Renders a Content's positioner in its portal, unless a namespace Portal holds it. */
+export declare function OwnPortal({ portal: BasePortal, children, }: {
+    portal: React.ElementType;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Drops undefined entries, so explicit placement props override defaults only when set. */
+export declare function defined<Props extends object>(props: Props): Partial<Props>;
+/** The placement props a popup Content passes to its Positioner. */
+export type Placement<Positioner extends React.ElementType> = Pick<React.ComponentPropsWithoutRef<Positioner>, 'side' | 'align' | 'sideOffset' | 'collisionPadding'>;

package/dist/parts.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComponentSizeContext, normalizeSize, useComponentSize, } from './sizing.js';
 import * as React from 'react';
+/** Joins class names, skipping empty ones. */
+export function cx(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
 /** The data-size value: a short alias (sm, md, lg) renders as its full name, so both
  * spellings meet the same CSS; other values such as xs or icon pass through. */
 export function sizeName(size) {
@@ -11,19 +15,41 @@ export function sizeName(size) {
 /** Preserve Base UI's state-dependent className contract when adding a skin. */
 export function skin(base, custom) {
     if (typeof custom === 'function')
-        return (state) => [base, custom(state)].filter(Boolean).join(' ');
-    return [base, custom].filter(Boolean).join(' ');
+        return (state) => cx(base, custom(state));
+    return cx(base, custom);
 }
-export function part(Component, base) {
+/** A styled Base UI part or element. A portal part renders outside the tree that sets
+ * data-ui-size, so it always carries the size scheme; other parts carry it only when
+ * size is set. */
+export function part(Component, base, { portal = false } = {}) {
     return React.forwardRef(function ThemedPart(props, ref) {
         const { className, size, ...rest } = props;
         const scheme = useComponentSize(size);
-        const portal = /positioner|popup|^pui-menu$|navigation-menu-viewport/.test(base);
         const classes = typeof className === 'function'
-            ? (state) => [base, className(state)].filter(Boolean).join(' ')
-            : [base, className].filter(Boolean).join(' ');
+            ? (state) => cx(base, className(state))
+            : cx(base, className);
         const element = (_jsx(Component, { ...rest, ref: ref, className: classes, "data-ui-size": size ? scheme : portal ? scheme : undefined }));
         // Keep the React subtree stable when size changes from omitted to explicit.
         return (_jsx(ComponentSizeContext.Provider, { value: scheme, children: element }));
     });
 }
+/** True inside a namespace's own Portal, so a Content that brings its portal adds no
+ * second one. Each Content resets it, so a nested popup portals itself. */
+const PortalScope = /* @__PURE__ */ React.createContext(false);
+/** A namespace Portal that marks its subtree as already portalled. */
+export function scopedPortal(BasePortal) {
+    const Scoped = React.forwardRef(function Portal(props, ref) {
+        return (_jsx(PortalScope.Provider, { value: true, children: React.createElement(BasePortal, { ...props, ref }) }));
+    });
+    return Scoped;
+}
+/** Renders a Content's positioner in its portal, unless a namespace Portal holds it. */
+export function OwnPortal({ portal: BasePortal, children, }) {
+    const inside = React.useContext(PortalScope);
+    const content = (_jsx(PortalScope.Provider, { value: false, children: children }));
+    return inside ? content : _jsx(BasePortal, { children: content });
+}
+/** Drops undefined entries, so explicit placement props override defaults only when set. */
+export function defined(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
+}

package/dist/popover.d.ts

@@ -1,21 +1,38 @@
 import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
 import { Popover as BasePopover } from '@base-ui/react/popover';
-declare function PopoverContent({ side, align, sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof BasePopover.Popup> & Pick<React.ComponentProps<typeof BasePopover.Positioner>, 'side' | 'align' | 'sideOffset' | 'collisionPadding'>): React.JSX.Element;
+declare function PopoverContent({ size, side, align, sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof BasePopover.Popup> & Pick<React.ComponentProps<typeof BasePopover.Positioner>, 'side' | 'align' | 'sideOffset' | 'collisionPadding'> & {
+    /** Width and density: small 240px, default 320px, large 480px. Unset, the
+     * popover keeps the default width and takes the surrounding density. */
+    size?: ComponentSizeAlias;
+}): React.JSX.Element;
+declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLHeadingElement>>;
+declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLParagraphElement>>;
+/** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
+declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Popover: {
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: typeof PopoverContent;
+    Title: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLParagraphElement>>;
     Root: typeof BasePopover.Root;
     Trigger: BasePopover.Trigger;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Positioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     createHandle: typeof BasePopover.createHandle;
     Handle: typeof BasePopover.Handle;
 };
-export { PopoverContent };
-export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, PopoverDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, PopoverHandle: typeof BasePopover.Handle, PopoverPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPositioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverRoot: typeof BasePopover.Root, PopoverTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, PopoverTrigger: BasePopover.Trigger, PopoverViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { PopoverContent, PopoverTitle, PopoverDescription, PopoverPortal };
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, PopoverHandle: typeof BasePopover.Handle, PopoverPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverPositioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PopoverRoot: typeof BasePopover.Root, PopoverTrigger: BasePopover.Trigger, PopoverViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/popover.js

@@ -1,13 +1,23 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { skin } from './parts.js';
+import { OwnPortal, part, scopedPortal, sizeName, skin } from './parts.js';
 import { useComponentSize } from './sizing.js';
 import { Popover as BasePopover } from '@base-ui/react/popover';
-function PopoverContent({ side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 12, className, ...props }) {
-    const scheme = useComponentSize();
-    return (_jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'pui-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, ...props, className: skin('pui-popover', className) }) }));
+function PopoverContent({ size, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 12, className, ...props }) {
+    const scheme = useComponentSize(size);
+    return (_jsx(OwnPortal, { portal: BasePopover.Portal, children: _jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: 'pui-positioner', children: _jsx(BasePopover.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, className: skin('pui-popover', className) }) }) }));
 }
-export const Popover = { ...BasePopover, Content: PopoverContent };
+const PopoverTitle = /* @__PURE__ */ part(BasePopover.Title, 'pui-popover-title');
+const PopoverDescription = /* @__PURE__ */ part(BasePopover.Description, 'pui-popover-description');
+/** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
+const PopoverPortal = /* @__PURE__ */ scopedPortal(BasePopover.Portal);
+export const Popover = {
+    ...BasePopover,
+    Portal: PopoverPortal,
+    Content: PopoverContent,
+    Title: PopoverTitle,
+    Description: PopoverDescription,
+};
 // Flat names for React Server Components, which cannot dot into client exports.
-export { PopoverContent };
-export const { Arrow: PopoverArrow, Backdrop: PopoverBackdrop, Close: PopoverClose, Description: PopoverDescription, Handle: PopoverHandle, Popup: PopoverPopup, Portal: PopoverPortal, Positioner: PopoverPositioner, Root: PopoverRoot, Title: PopoverTitle, Trigger: PopoverTrigger, Viewport: PopoverViewport, } = Popover;
+export { PopoverContent, PopoverTitle, PopoverDescription, PopoverPortal };
+export const { Arrow: PopoverArrow, Backdrop: PopoverBackdrop, Close: PopoverClose, Handle: PopoverHandle, Popup: PopoverPopup, Positioner: PopoverPositioner, Root: PopoverRoot, Trigger: PopoverTrigger, Viewport: PopoverViewport, } = Popover;