@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

package/dist/components/core/MenuItem/MenuItem.theme.js

@@ -1,25 +1,28 @@
 const menuItemTheme = {
-    // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
-        "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
-        "data-[focused=true]:bg-[var(--color-background-secondary)] " +
-        "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
-        "mb-px last-of-type:mb-0 " +
-        "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none " +
-        // Dark mode
-        " " +
-        " " +
-        "dark:data-[focused=true]:bg-[var(--color-background-secondary)] " +
-        "dark:hover:bg-[var(--color-neutral-700)] " +
-        "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
+    // Structural base only — layout, spacing, radius, transition. No state colors:
+    // those are resolved in JS (see `states`) so a consumer `className` always wins.
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 mb-px last-of-type:mb-0",
+    // State styling resolved in JS to plain utility classes so `className` overrides
+    // win (data-[state] variants carry attribute-selector specificity and can't be
+    // overridden by a plain className — see Button.theme.ts / NavItem.theme.ts for
+    // the same rationale). data-* attributes are still emitted as hooks for
+    // consumer CSS + tests, just not used for styling here.
+    states: {
+        default: "text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]",
+        selected: "bg-[var(--color-primary)]/5 text-[var(--color-primary)] " +
+            "dark:bg-white/10 dark:text-[var(--color-text-primary)]",
+        disabled: "opacity-60 cursor-not-allowed pointer-events-none",
+    },
+    // Keyboard-focus highlight (item received roving focus) — same fill as hover.
+    focusedStyle: "bg-[var(--color-surface-hover)]",
     // Danger item styling (e.g., Delete actions)
     dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
         "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
     // Focus visible styling for keyboard navigation
-    focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
+    focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)] " +
+        "dark:focus-visible:ring-[var(--color-primary-400)]",
     // Description text below the label
-    subtitleStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0.5 truncate",
 };
 
 export { menuItemTheme };

package/dist/components/core/MenuItem/MenuItem.types.d.ts

@@ -17,6 +17,8 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     disabled?: boolean;
     /** Whether the item has danger/destructive styling */
     isDanger?: boolean;
+    /** Whether the item is in a selected state (drives selected styling) */
+    selected?: boolean;
     /** Called on click or Enter/Space keyboard activation */
     onActivate?: () => void;
     /** Theme overrides for styling */

package/dist/components/core/Modal/Modal.d.ts

@@ -3,7 +3,7 @@ import { ModalProps, ModalContextValue } from "./Modal.types";
 export declare const ModalContext: React.Context<ModalContextValue | undefined>;
 export declare const useModalContext: () => ModalContextValue;
 export declare const Modal: {
-    ({ isOpen, onClose, size, variant, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {

package/dist/components/core/Modal/Modal.js

@@ -18,8 +18,7 @@ const useModalContext = () => {
         throw new Error("Modal compound components must be used within <Modal>");
     return ctx;
 };
-const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, ...props }) => {
-    var _a;
+const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, ...props }) => {
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
@@ -39,10 +38,6 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
     const theme = {
         ...modalTheme,
         ...(themeOverrides || {}),
-        containerVariants: {
-            ...modalTheme.containerVariants,
-            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
-        },
     };
     // Context value
     const contextValue = useMemo(() => ({
@@ -59,7 +54,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         titleId,
         subtitleId,
     }), [isOpen, onClose, size, isSizeToken, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], isSizeToken ? modalSizeVariants[size] : size, className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, isSizeToken ? modalSizeVariants[size] : size, className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));

package/dist/components/core/Modal/Modal.theme.js

@@ -1,17 +1,13 @@
 const modalTheme = {
     // Note: overlay styling is now handled by the shared Overlay component
     overlay: "",
-    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden",
-    containerVariants: {
-        default: "bg-[var(--color-surface-raised)] ring-4 !ring-white/10 dark:bg-[var(--color-surface-raised)] border border-[var(--color-border)]",
-        translucent: "bg-gradient-to-b from-[var(--color-background)]/90 to-[var(--color-background)]/70 backdrop-blur-xl ring-4 ring-white/20 border-t border-[var(--color-border)]",
-    },
-    header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
+    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden bg-[var(--color-surface-raised)]/80 ring-6 !ring-white/10 border border-[var(--color-border)]",
+    header: "flex items-start justify-between p-4 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
     title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-muted)] mt-0.5",
-    body: "flex-1 overflow-y-auto p-6 pb-3",
-    footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
+    body: "flex-1 overflow-y-auto p-4 pb-3",
+    footer: "flex items-center justify-end gap-2 p-3 py-2 border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {

package/dist/components/core/Modal/Modal.types.d.ts

@@ -2,11 +2,9 @@ import React from "react";
 export type ModalSizeToken = "sm" | "md" | "lg" | "xl" | "full";
 /** Preset size token or any arbitrary Tailwind width class, e.g. `"w-80"`, `"w-[50vw]"` */
 export type ModalSize = ModalSizeToken | (string & {});
-export type ModalVariant = "default" | "translucent";
 export interface ModalTheme {
     overlay: string;
     container: string;
-    containerVariants: Record<ModalVariant, string>;
     header: string;
     headerContent: string;
     title: string;
@@ -17,7 +15,6 @@ export interface ModalTheme {
 export interface ModalThemeOverrides {
     overlay?: string;
     container?: string;
-    containerVariants?: Partial<Record<ModalVariant, string>>;
     header?: string;
     headerContent?: string;
     title?: string;
@@ -43,13 +40,6 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     isOpen: boolean;
     onClose: () => void;
     size?: ModalSize;
-    /**
-     * Visual variant of the modal container.
-     * - `default`: Solid background with subtle ring
-     * - `translucent`: Frosted glass effect with reduced opacity and backdrop blur
-     * @default "default"
-     */
-    variant?: ModalVariant;
     closeOnOverlayClick?: boolean;
     closeOnEsc?: boolean;
     showCloseButton?: boolean;

package/dist/components/core/Modal/index.d.ts

@@ -1,2 +1,2 @@
 export { Modal } from "./Modal";
-export type { ModalProps, ModalSize, ModalVariant, ModalThemeOverrides } from "./Modal.types";
+export type { ModalProps, ModalSize, ModalThemeOverrides } from "./Modal.types";

package/dist/components/core/ModalStack/ModalStack.d.ts

@@ -5,7 +5,7 @@ export declare const ModalStack: {
     displayName: string;
 } & {
     Modal: {
-        ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+        ({ size, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/core/ModalStack/ModalStack.types.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ModalSize, ModalVariant, ModalThemeOverrides } from "../Modal/Modal.types";
+import { ModalSize, ModalThemeOverrides } from "../Modal/Modal.types";
 export interface ModalStackProps {
     isOpen: boolean;
     onClose: () => void;
@@ -12,7 +12,6 @@ export interface ModalStackModalProps {
     isOpen?: boolean;
     onClose?: () => void;
     size?: ModalSize;
-    variant?: ModalVariant;
     showCloseButton?: boolean;
     showBackButton?: boolean;
     onBack?: () => void;

package/dist/components/core/ModalStack/ModalStackModal.d.ts

@@ -6,6 +6,6 @@ export interface ModalStackModalInternalProps extends ModalStackModalProps {
     _isBackModal?: boolean;
 }
 export declare const ModalStackModal: {
-    ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/core/ModalStack/ModalStackModal.js

@@ -7,8 +7,7 @@ import { ArrowLeftIcon } from '@heroicons/react/24/outline';
 import { modalStackTheme } from './ModalStack.theme.js';
 import { Button } from '../Button/Button.js';
 
-const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = true, showBackButton = false, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }) => {
-    var _a;
+const ModalStackModal = ({ size = "md", showCloseButton = true, showBackButton = false, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }) => {
     const id = useId();
     const titleId = `${id}-title`;
     const subtitleId = `${id}-subtitle`;
@@ -25,10 +24,6 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
     const theme = {
         ...modalTheme,
         ...(themeOverrides || {}),
-        containerVariants: {
-            ...modalTheme.containerVariants,
-            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
-        },
     };
     const contextValue = {
         isOpen: true,
@@ -44,7 +39,7 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
         titleId,
         subtitleId,
     };
-    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
 };
 ModalStackModal.displayName = "ModalStack.Modal";
 

package/dist/components/core/NavItem/NavItem.js

@@ -186,8 +186,15 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
     const textClasses = cn(theme.text);
     // Chevron for submenu
     const chevron = hasSubmenu && !isCollapsedView ? (jsx(ChevronDownIcon, { strokeWidth: 2, className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "text-[var(--color-text-primary)]", isExpanded && "rotate-180") })) : null;
-    // Strip drag/animation DOM handlers that collide with motion's prop types
-    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
+    // Strip drag/animation DOM handlers that collide with motion's prop types.
+    // `onSubmit`/`onSubmitCapture` are stripped too: NavItem renders as either
+    // `motion.a` or `motion.button`, but `NavItemProps extends HTMLAttributes<HTMLElement>`
+    // types these as `SubmitEventHandler<HTMLElement>`. Under react@canary types
+    // (e.g. Next 16 consumers building from source), `SubmitEvent` gains a
+    // T-dependent field, so the generic-element handler is no longer assignable to
+    // motion's element-specific `HTMLMotionProps<"a">` — a build-time type error.
+    // A NavItem never submits a form, so dropping these is behaviour-neutral.
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, onSubmit, onSubmitCapture, ...motionSafeProps } = props;
     const interactionProps = {
         className: cn("relative overflow-hidden", containerClasses),
         "aria-disabled": isDisabled || undefined,
@@ -199,15 +206,24 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
         whileHover: isDisabled ? undefined : (isCollapsedView ? { scale: 1.05 } : undefined),
         whileTap: isDisabled ? undefined : { scale: 0.98 },
         transition: { type: "spring", stiffness: 400, damping: 25 },
+        // Note: tried Framer Motion's canonical `layout` + `LayoutGroup` +
+        // `mode="popLayout"` pattern for the row's height shrink — transforms
+        // *do* fire (verified via getComputedStyle), but the parent Sidebar's
+        // concurrent `motion.aside` width animation re-triggers measurements
+        // every frame, which keeps resetting the layout animation before it
+        // settles. The row visibly freezes mid-transform. Animating the inner
+        // motion.div's height directly (see AnimatePresence below) sidesteps the
+        // concurrent-measurement problem and produces a smooth ~200ms shrink.
         ...motionSafeProps,
     };
     const innerContent = (jsxs(Fragment, { children: [startContent && (jsxs("div", { className: "flex items-center justify-center flex-shrink-0 relative", children: [React__default.isValidElement(startContent)
                         ? React__default.cloneElement(startContent, {
                             className: cn(iconClasses, startContent.props.className),
                         })
-                        : startContent, isCollapsedView && hasNotification && (jsx("span", { className: cn("absolute -top-0.5 -right-0.5 ring-2 ring-[var(--color-surface)]", navItemTheme.notificationDot, customTheme.notificationDot), "aria-hidden": "true" }))] })), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.span, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
+                        : startContent, isCollapsedView && hasNotification && (jsx("span", { className: cn("absolute -top-0.5 -right-0.5 ring-2 ring-[var(--color-surface)]", navItemTheme.notificationDot, customTheme.notificationDot), "aria-hidden": "true" }))] })), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { initial: { opacity: 0, x: -4, height: 0 }, animate: { opacity: 1, x: 0, height: "auto" }, exit: { opacity: 0, x: -4, height: 0 }, transition: {
                         opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
-                        x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }
+                        x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+                        height: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
                     }, className: "flex-1 min-w-0 flex flex-col overflow-hidden whitespace-nowrap", children: [jsxs("span", { className: "flex items-center justify-between gap-2 w-full min-w-0", children: [jsx("span", { className: cn("truncate flex-1 min-w-0", textClasses), children: children }), jsxs("span", { className: "flex items-center gap-1.5 flex-shrink-0 ml-2", children: [shortcut && (jsx("kbd", { className: "hidden group-hover:inline-flex h-[18px] items-center text-[10px] text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 leading-none flex-shrink-0", children: shortcut })), notificationElement, endContent, chevron] })] }), description && (jsx("span", { className: "block text-xs text-[var(--color-text-muted)] mt-0.5 truncate w-full", children: description }))] }, "expanded-content")) }), isCollapsedView && (jsxs("span", { className: "sr-only", children: [children, typeof notification === "number" && notification > 0
                         ? ` (${notification} unread)`
                         : notification === true

package/dist/components/core/NavItem/NavItem.theme.js

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "group relative flex items-center gap-3 px-2.5 py-2 text-sm font-medium cursor-pointer select-none w-full rounded-[var(--nav-item-radius)] outline-none overflow-hidden transition-[padding,gap,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] text-left",
+    baseStyle: "group relative flex items-center gap-3 px-2.5 py-2 text-sm font-medium cursor-pointer select-none w-full rounded-[var(--nav-item-radius)] outline-none overflow-hidden transition-[padding,gap,height,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] text-left",
     icon: "size-5",
     text: "flex-1 min-w-0 truncate",
     // State styling resolved in JS to plain utility classes so `className` overrides win
@@ -25,8 +25,19 @@ const navItemTheme = {
         1: "pl-11",
         2: "pl-10",
     },
+    // Collapsed override gives every nav row a uniform 36×36 square hit-area.
+    // CRITICAL: this uses PADDING-based centering, not `justify-center`, so the
+    // expanded↔collapsed transition is one continuous animation of the padding
+    // + gap properties (which are CSS-transitionable). Toggling `justify-*`
+    // would cause a frame-0 flex-layout snap — the label appears at its final
+    // position instead of sliding in via AnimatePresence.
+    //
+    // On a 60px rail (Sidebar.Content px-3 → 36px interior, NavItem w-full):
+    //   !px-2 (8 each) + size-5 icon (20) = 8 + 20 + 8 = 36 → centered icon.
+    //   baseStyle's py-2 (8 each) + icon 20 = 36 → square height.
+    // !py-2 is repeated explicitly so the compact density's py-1.5 doesn't win.
     collapsed: {
-        container: "!gap-0 !px-[14px] !py-2",
+        container: "!gap-0 !px-2 !py-2",
         icon: "size-5",
     },
     density: {

package/dist/components/core/PageHeading/PageHeading.theme.js

@@ -1,8 +1,8 @@
 const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex items-center gap-4",
-    titleStyle: "text-xl font-semibold tracking-tight text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    titleStyle: "text-xl font-bold  text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
     actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
     iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",
     separatorStyle: "border-b border-[var(--color-border)] mt-4",

package/dist/components/core/Popover/Popover.theme.js

@@ -5,7 +5,7 @@ const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
     // Body styles
-    bodyStyle: "bg-[var(--color-surface-overlay)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-surface-overlay)] ",
+    bodyStyle: "bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))]",
 };
 
 export { popoverTheme };

package/dist/components/core/Popover/Popover.types.d.ts

@@ -48,8 +48,12 @@ export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     animation?: boolean;
     portal?: boolean;
-    /** Enable scroll support with viewport-aware max-height. Uses available
-     *  space computed by the positioning hook, falling back to 400px. */
+    /** Cap the body to the viewport-available height (space below/above the
+     *  trigger, computed by the positioning hook; falls back to 400px) and add
+     *  `overflow-y-auto`, so tall content scrolls inside the popover instead of
+     *  extending past the viewport unreachably. `max-height` + `auto` means short
+     *  popovers show no scrollbar. Set `false` to opt out (uncapped, may overflow).
+     *  @default true */
     scrollable?: boolean;
     /** Custom max-height when scrollable is true (e.g. "300px", "20rem").
      *  Overrides the default viewport-aware height. */

package/dist/components/core/Popover/PopoverBody.js

@@ -26,7 +26,7 @@ const overlayContentAnimations = {
 /**
  * PopoverBody component displays the body/content of the popover
  */
-const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = false, maxHeight, ...props }, ref) => {
+const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = true, maxHeight, ...props }, ref) => {
     const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
     const shouldReduceMotion = useReducedMotion();
     const localRef = useRef(null);
@@ -45,13 +45,20 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     });
     // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
     useClickOutside(localRef, (e) => {
-        var _a;
+        var _a, _b, _c;
         if (hasBackdrop)
             return; // Overlay handles click-outside via backdrop
         if (e.target === triggerRef.current ||
             ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
+        // Ignore clicks that land inside any FlikkUI overlay portal (a nested
+        // Select/Tooltip/Dropdown/Popover renders to document.body, outside our
+        // content ref — without this it would count as an outside click and
+        // dismiss the popover). See the `data-flikkui-portal` convention.
+        if ((_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]")) {
+            return;
+        }
         if (closeOnClickOutside && !preventClose) {
             onOpenChange(false);
         }
@@ -120,7 +127,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
                 ? { duration: 0 }
                 : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
     }
     return popoverContent;
 });