@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.32

package/dist/components/core/ContextMenu/ContextMenuSubTrigger.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useCallback } from 'react';
+import React__default, { useRef, useCallback, useEffect } from 'react';
 import { CaretRight } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.js';
@@ -10,21 +10,34 @@ import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.j
  */
 const ContextMenuSubTrigger = React__default.forwardRef(({ children, className, disabled = false, startContent, ...props }, ref) => {
     const { theme } = useContextMenuContext();
-    const { isOpen, onOpenChange, triggerRef } = useSubMenuContext();
+    const { isOpen, onOpenChange, triggerRef, cancelClose, scheduleClose } = useSubMenuContext();
     const hoverTimeoutRef = useRef(null);
+    const clearOpenTimeout = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+    }, []);
     // Handle mouse enter - open submenu after short delay
     const handleMouseEnter = useCallback(() => {
         if (disabled)
             return;
-        // Clear any existing timeout
-        if (hoverTimeoutRef.current) {
-            clearTimeout(hoverTimeoutRef.current);
-        }
+        // Re-entering the trigger cancels a close scheduled by leaving the submenu body.
+        cancelClose();
+        clearOpenTimeout();
         // Open submenu after short delay
         hoverTimeoutRef.current = setTimeout(() => {
+            hoverTimeoutRef.current = null;
             onOpenChange(true);
         }, 150);
-    }, [disabled, onOpenChange]);
+    }, [disabled, onOpenChange, cancelClose, clearOpenTimeout]);
+    // Handle mouse leave - hand off to the submenu body, which cancels the close if the
+    // pointer lands there; otherwise the submenu closes after the grace period.
+    const handleMouseLeave = useCallback(() => {
+        clearOpenTimeout();
+        scheduleClose();
+    }, [clearOpenTimeout, scheduleClose]);
+    useEffect(() => clearOpenTimeout, [clearOpenTimeout]);
     // Handle keyboard navigation
     const handleKeyDown = useCallback((e) => {
         if (disabled)
@@ -54,7 +67,7 @@ const ContextMenuSubTrigger = React__default.forwardRef(({ children, className,
             ref.current = el;
         }
     }, [ref, triggerRef]);
-    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsx("span", { className: "flex-1 truncate", children: children }), jsx(CaretRight, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", weight: "bold" })] }));
+    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onKeyDown: handleKeyDown, ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsx("span", { className: "flex-1 truncate", children: children }), jsx(CaretRight, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", weight: "bold" })] }));
 });
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 

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

@@ -1,6 +1,6 @@
 const dragDropTheme = {
-    draggableStyle: 'select-none rounded-[var(--radius-base)] transition-all duration-200',
-    droppableStyle: 'min-h-[120px] border-2 border-dashed border-[var(--color-border)] rounded-[var(--radius-base)] p-4 transition-all duration-200 bg-[var(--color-background)]',
+    draggableStyle: 'select-none rounded-[var(--radius-base)] transition-all duration-[var(--motion-duration-base)]',
+    droppableStyle: 'min-h-[120px] border-2 border-dashed border-[var(--color-border)] rounded-[var(--radius-base)] p-4 transition-all duration-[var(--motion-duration-base)] bg-[var(--color-background)]',
     dragOverStyle: 'border-[var(--color-primary)] bg-[var(--color-primary-50)]',
     dragPreviewStyle: 'opacity-60',
 };

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

@@ -10,7 +10,7 @@ const drawerTheme = {
     inner: "h-full flex flex-col",
     header: "flex items-start justify-between px-[var(--drawer-px)] py-[var(--drawer-py)] border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
-    title: "text-[length:var(--drawer-title-size)] font-semibold leading-6 text-[var(--color-text-primary)]",
+    title: "text-[length:var(--drawer-title-size)]/[var(--drawer-title-line-height)] font-semibold text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto px-[var(--drawer-px)] py-[var(--drawer-py)]",
     // Footer's vertical padding is deliberately lighter than header/body —

package/dist/components/core/Drawer/DrawerHeader.js

@@ -3,7 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './DrawerContext.js';
 import { Button } from '../Button/Button.js';
-import 'react';
 import { X } from '@phosphor-icons/react';
 
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -141,12 +141,22 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
             ((_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
-        // menu's own DOM subtree — without this it would count as an outside
-        // click and dismiss the menu). See the `data-flikkui-portal` convention
-        // (CLAUDE.md §11) — mirrors PopoverBody's bail.
-        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]")) {
+        // Ignore clicks that land inside a DESCENDANT FlikkUI overlay portal (a
+        // nested Select/Tooltip/Dropdown/Popover renders to document.body,
+        // outside our menu's own DOM subtree — without this it would count as
+        // an outside click and dismiss the menu). See the `data-flikkui-portal`
+        // convention (CLAUDE.md §11) — mirrors PopoverBody's bail.
+        //
+        // The bail only protects against a DESCENDANT portal, not an ANCESTOR
+        // one: when this menu's own trigger lives inside another overlay (e.g.
+        // a Dropdown opened from inside a Modal), a click on that host
+        // overlay's body content also matches `closest("[data-flikkui-portal]")`
+        // — it finds the Modal's portal wrapper, which contains our trigger.
+        // That's a real outside click and must still close the menu. Only bail
+        // when the matched portal does NOT contain our trigger — i.e. it's a
+        // portal we opened ourselves, not the one hosting us.
+        const portalEl = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]");
+        if (portalEl && !portalEl.contains(triggerRef.current)) {
             return;
         }
         onOpenChange(false);
@@ -209,7 +219,12 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     });
     // Extract DOM props to avoid type conflicts with Framer Motion
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
-    const menuContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, className: cn("fixed z-50", surfaceClasses(surfaceLevel, { translucent: true }), theme.menuStyle, horizontal ? "flex-row p-1" : "flex-col p-1", className), style: {
+    const menuContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, className: cn("fixed z-50", surfaceClasses(surfaceLevel, { translucent: true }), theme.menuStyle, 
+            // --dropdown-padding (not a literal p-1): it also feeds
+            // --dropdown-inner-radius, which rounds the first/last row.
+            horizontal
+                ? "flex-row p-[var(--dropdown-padding)]"
+                : "flex-col p-[var(--dropdown-padding)]", className), style: {
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,

package/dist/components/core/Link/Link.js

@@ -14,7 +14,7 @@ import { cn } from '../../../utils/cn.js';
 // Resting link look (transparent; underline grows in on hover via the motion
 // span below). Kept minimal and open.
 const LINK_BASE = "relative inline-flex items-center justify-center gap-2 bg-transparent border-transparent cursor-pointer " +
-    "transition-colors duration-300 ease-in-out " +
+    "transition-colors duration-[var(--motion-duration-slow)] ease-in-out " +
     "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2";
 // Animated underline — a bottom-anchored line that scales in from the left on
 // hover/focus. `bg-current` inherits each color variant's text tint.

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

@@ -19,7 +19,7 @@ const masonryTheme = {
     },
     // Animation classes
     animations: {
-        transition: "transition-[left,top,width,height] duration-400 ease-in-out",
+        transition: "transition-[left,top,width,height] duration-[var(--motion-duration-slower)] ease-in-out",
         enter: "opacity-0 scale-95",
         exit: "opacity-100 scale-100",
     },

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

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { menuItemTheme } from './MenuItem.theme.js';
+import { Ripple } from '../shared/Ripple.js';
 
 /**
  * MenuItem - Shared base component for menu items used by Dropdown and ContextMenu.
@@ -47,7 +48,7 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
         // Focus fill composites over any state (incl. selected) — see focusedStyle note.
         isFocused && !disabled && theme.focusedStyle, isDanger && theme.dangerStyle, theme.focusStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: theme.subtitleStyle, children: subtitle })
-                        : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
+                        : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent })), jsx(Ripple, { disabled: disabled })] }));
 });
 MenuItem.displayName = "MenuItem";
 

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

@@ -1,7 +1,19 @@
 const menuItemTheme = {
     // 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",
+    //
+    // Radius: interior rows are a flat 4px; the first and last rows meet the panel's
+    // own corners, so they take --dropdown-inner-radius — the panel's radius minus its
+    // border and padding — which keeps their curve concentric with the panel's instead
+    // of bulging past it (same calc model as --segmented-inner-radius).
+    // 🔴 The first:/last: variants resolve against DOM SIBLINGS: any wrapper element
+    // around a row makes it both first and last of its own subtree and rounds all four
+    // corners (see ContextMenuSub, which renders no element for exactly this reason).
+    // 🔴 This assumes a --dropdown-radius panel. That holds for every host today —
+    // Mention's suggestion popover renders MenuItem rows too, and its panel's
+    // --form-dropdown-radius aliases --dropdown-radius for exactly that reason. A host
+    // that gives its panel a different radius has to re-derive this row radius with it.
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] cursor-pointer outline-none select-none first:rounded-t-[var(--dropdown-inner-radius)] last:rounded-b-[var(--dropdown-inner-radius)] rounded-[4px] transition-colors duration-[var(--motion-duration-slow)] 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

package/dist/components/core/Message/Message.js

@@ -27,6 +27,8 @@ import { MessageDateDivider } from './MessageDateDivider.js';
 
 const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timestamp, actions, timestampStyle, streamingIndicatorStyle, actionsContainerStyle, variant, }) => {
     if (isStreaming) {
+        if (streamingIndicator === false)
+            return null;
         return (jsx("div", { className: cn("flex flex-row items-center gap-3 mt-1", variant === "receiver" ? "ml-2" : "mr-3"), children: jsx("div", { className: cn(timestampStyle, streamingIndicatorStyle), children: streamingIndicator || (jsxs(Fragment, { children: [jsx("span", { children: "Typing" }), jsx(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
                                 duration: 1.5,
                                 repeat: Infinity,

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

@@ -46,13 +46,13 @@ const messageTheme = {
     statusFailed: "text-[var(--color-danger)]",
     // Attachment styles
     attachmentContainerStyle: "flex flex-col gap-2 mt-2",
-    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-xs",
+    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2.5 text-xs",
     imageStyle: "rounded-lg overflow-hidden max-w-xs",
-    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-xs",
+    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2.5 text-xs",
     linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-xs max-w-xs",
     // Reactions styles
     reactionsContainerStyle: "flex flex-wrap items-center gap-1.5 mt-1.5",
-    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-surface-hover)]",
+    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-surface-hover)]",
     reactionPillActiveStyle: "border-[var(--color-primary-200)] bg-[var(--color-primary-50)] text-[var(--color-primary)]",
     // Reply/quote styles
     replyStyle: "border-l-2 border-[var(--color-border)] pl-2.5 mb-2 text-xs text-[var(--color-text-muted)]",

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

@@ -5,6 +5,6 @@ import { Variants } from 'motion/react';
 export declare const modalOverlayAnimations: Variants;
 /**
  * Modal content animation variants
- * Scale + slight slide (Vercel/Notion style) with premium spring
+ * Restrained scale + lift with a matched, responsive exit.
  */
 export declare const modalContentAnimations: Variants;

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

@@ -1,21 +1,39 @@
 "use client";
 import '../../../theme/ThemeContext.js';
 import '../../../theme/SurfaceContext.js';
-import { springs, overlayBackdropAnimations } from '../../../theme/animations.js';
+import { easings, springs } from '../../../theme/animations.js';
 
 /**
  * Modal overlay animation variants
  */
-const modalOverlayAnimations = overlayBackdropAnimations;
+const modalOverlayAnimations = {
+    initial: { opacity: 0 },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.28,
+            ease: easings.easeOut,
+        },
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.22,
+            delay: 0.05,
+            ease: easings.easeInOut,
+        },
+    },
+};
 /**
  * Modal content animation variants
- * Scale + slight slide (Vercel/Notion style) with premium spring
+ * Restrained scale + lift with a matched, responsive exit.
  */
 const modalContentAnimations = {
     initial: {
         opacity: 0,
-        scale: 0.98,
-        y: 12,
+        scale: 0.975,
+        y: 10,
+        transformOrigin: "50% 45%",
         willChange: "transform, opacity",
     },
     animate: {
@@ -23,17 +41,38 @@ const modalContentAnimations = {
         scale: 1,
         y: 0,
         transition: {
-            ...springs.smooth,
-            delay: 0.05,
+            opacity: {
+                duration: 0.18,
+                delay: 0.07,
+                ease: easings.easeOut,
+            },
+            scale: {
+                ...springs.premium,
+                delay: 0.07,
+            },
+            y: {
+                ...springs.premium,
+                delay: 0.07,
+            },
         },
     },
     exit: {
         opacity: 0,
-        scale: 0.98,
-        y: 8,
+        scale: 0.985,
+        y: 6,
         transition: {
-            duration: 0.15,
-            ease: [0.4, 0, 1, 1],
+            opacity: {
+                duration: 0.14,
+                ease: easings.easeIn,
+            },
+            scale: {
+                duration: 0.18,
+                ease: easings.easeInOut,
+            },
+            y: {
+                duration: 0.18,
+                ease: easings.easeInOut,
+            },
         },
     },
 };

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

@@ -54,7 +54,11 @@ const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, c
         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(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, isSizeToken ? modalSizeVariants[size] : size, darkMode && "dark", 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(
+        // Opaque: the panel sits behind Overlay's dimming scrim, and the blur lives on
+        // that scrim — not here. At /80 the scrim tinted the panel gray instead of
+        // frosting anything. Matches Drawer, the other backdrop-grounded dialog.
+        surfaceClasses(surfaceLevel, { translucent: false, shadow: false }), theme.container, isSizeToken ? modalSizeVariants[size] : size, darkMode && "dark", className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) }) }));

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

@@ -6,7 +6,7 @@ const modalTheme = {
     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 ring-6 !ring-white/10 border border-[var(--color-border)]",
     header: "flex items-start justify-between px-[var(--modal-px)] pt-[var(--modal-py)] pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-[length:var(--modal-title-size)] leading-6 font-semibold text-[var(--color-text-primary)]",
+    title: "text-[length:var(--modal-title-size)]/[var(--modal-title-line-height)] font-semibold text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     // pb-[...*0.75] is the gap before the footer — proportional to --modal-py
     // (today's ratio, 12/16) so a themed --modal-py increase widens it too.

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

@@ -3,7 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './ModalContext.js';
 import { Button } from '../Button/Button.js';
-import 'react';
 import { X } from '@phosphor-icons/react';
 
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {

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

@@ -47,7 +47,9 @@ const ModalStackModal = ({ size = "md", showCloseButton = true, showBackButton =
         titleId,
         subtitleId,
     }), [closeHandler, size, isSizeToken, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
-    return (jsx(ModalContext.Provider, { value: contextValue, children: jsx("div", { className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Link, { onClick: backHandler, "aria-label": "Go back", size: "sm", children: [jsx(ArrowLeft, { className: "size-4" }), "Back"] }) })), children] }) }) }));
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsx("div", { className: cn(
+            // Opaque — same reason as Modal: behind the shared scrim, no blur on the panel.
+            surfaceClasses(surfaceLevel, { translucent: false, shadow: false }), theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Link, { onClick: backHandler, "aria-label": "Go back", size: "sm", children: [jsx(ArrowLeft, { className: "size-4" }), "Back"] }) })), children] }) }) }));
 };
 ModalStackModal.displayName = "ModalStack.Modal";
 

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

@@ -15,6 +15,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
 import { CaretDown } from '@phosphor-icons/react';
+import { Ripple } from '../shared/Ripple.js';
 import { AnimatePresence, motion } from 'motion/react';
 
 const NavItem = React__default.forwardRef(({ children, startContent, endContent, notification, description, shortcut, href, onClick, active = false, isDisabled = false, hasSubmenu: propHasSubmenu = false, expanded: controlledExpanded, onToggleExpanded, items, defaultExpanded = false, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
@@ -186,7 +187,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
     const iconClasses = cn(theme.icon, getIconStateClasses(), hasSubmenu && isExpanded && !isActive && "opacity-100", isCollapsedView && ((_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon), isHoveredOrDropdownOpen && "opacity-100");
     const textClasses = cn(theme.text);
     // Chevron for submenu
-    const chevron = hasSubmenu && !isCollapsedView ? (jsx(CaretDown, { weight: "bold", className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "text-[var(--color-text-primary)]", isExpanded && "rotate-180") })) : null;
+    const chevron = hasSubmenu && !isCollapsedView ? (jsx(CaretDown, { weight: "bold", className: cn("size-4 transition-transform duration-[var(--motion-duration-base)] 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.
     // `onSubmit`/`onSubmitCapture` are stripped too: NavItem renders as either
     // `motion.a` or `motion.button`, but `NavItemProps extends HTMLAttributes<HTMLElement>`
@@ -230,7 +231,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                         ? ` (${notification} unread)`
                         : notification === true
                             ? " (unread)"
-                            : null] }))] }));
+                            : null] })), jsx(Ripple, { disabled: isDisabled })] }));
     // Content component
     const content = href && !hasSubmenu ? (jsx(motion.a, { ref: ref, href: isDisabled ? undefined : href, tabIndex: isDisabled ? -1 : undefined, ...interactionProps, children: innerContent })) : (jsx(motion.button, { ref: ref, type: "button", disabled: isDisabled, ...interactionProps, children: innerContent }));
     // Self-contained submenu

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,height,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-[var(--motion-duration-base)] 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

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

@@ -1,5 +1,5 @@
 const offlineIndicatorTheme = {
-    base: "fixed z-50 flex items-center gap-1.5 transition-colors duration-300 select-none",
+    base: "fixed z-50 flex items-center gap-1.5 transition-colors duration-[var(--motion-duration-slow)] select-none",
     positions: {
         top: "top-4 left-1/2 -translate-x-1/2",
         bottom: "bottom-4 left-1/2 -translate-x-1/2",
@@ -34,7 +34,9 @@ const offlineIndicatorTheme = {
     // (near-black in light, near-white in dark) — a fixed Link color can't.
     action: "text-xs font-semibold text-inherit",
     icon: "size-3.5 flex-shrink-0",
-    message: "text-xs font-medium -tracking-[0.025em]",
+    // tracking-tight IS -0.025em — byte-identical to the arbitrary value it
+    // replaces, but routed through --tracking-tight so a theme can retune it.
+    message: "text-xs font-medium tracking-tight",
     queueCount: "text-xs opacity-80 ml-1",
 };
 

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

@@ -1,7 +1,7 @@
 const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex flex-col items-start sm:flex-row sm:items-center gap-4",
-    titleStyle: "text-[length:var(--page-heading-title-size)] leading-[1.4] font-bold text-[var(--color-text-primary)]",
+    titleStyle: "text-[length:var(--page-heading-title-size)]/[var(--page-heading-title-line-height)] 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)]",

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

@@ -7,7 +7,7 @@ const paginationTheme = {
     // Unified item styles for all pagination elements (pages, navigation, etc.)
     // Light mode: white background, muted text, neutral borders
     // Dark mode: neutral-800 background, lighter text, neutral-600 borders
-    itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-radius)] transition-all duration-200 ease-in-out " +
+    itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-radius)] transition-all duration-[var(--motion-duration-base)] ease-in-out " +
         // Focus styles
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-[var(--color-mono-900)] " +
         // Base state - light
@@ -15,7 +15,7 @@ const paginationTheme = {
         // Base state - dark
         "dark:bg-transparent dark:text-[var(--color-text-secondary)] dark:border-transparent " +
         // Hover state - light
-        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)] " +
+        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface)] hover:border-[var(--color-border)] " +
         // Hover state - dark
         "dark:hover:bg-[var(--color-surface-hover)] dark:hover:text-[var(--color-text-primary)] dark:hover:border-[var(--color-border)]/0 " +
         // Active state - light

package/dist/components/core/Pill/Pill.js

@@ -4,6 +4,7 @@ import React__default, { useState, useEffect, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { pillTheme } from './Pill.theme.js';
 import { createPressVariants } from '../shared/interaction.animations.js';
+import { Ripple } from '../shared/Ripple.js';
 import { cn } from '../../../utils/cn.js';
 
 // Shared press physics + subtle hover lift (module-level constant)
@@ -122,7 +123,7 @@ const Pill = React__default.forwardRef((props, ref) => {
         // Accessibility
         role: isSelectable && !readOnly ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-pressed": isSelectable && !readOnly ? isSelected : undefined, "aria-readonly": readOnly || undefined, 
         // Animation
-        variants: PILL_PRESS_VARIANTS, animate: "rest", whileHover: isInteractive && !shouldReduceMotion ? "hover" : undefined, whileTap: isInteractive && !shouldReduceMotion ? "press" : undefined, ...restProps, children: [renderStartIcon(), children] }));
+        variants: PILL_PRESS_VARIANTS, animate: "rest", whileHover: isInteractive && !shouldReduceMotion ? "hover" : undefined, whileTap: isInteractive && !shouldReduceMotion ? "press" : undefined, ...restProps, children: [renderStartIcon(), children, isInteractive && jsx(Ripple, {})] }));
 });
 Pill.displayName = "Pill";
 

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

@@ -8,8 +8,10 @@ const pillTheme = {
     /**
      * Base pill style - structure and default colors (no hover)
      */
-    baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
-        "ring-1 bg-[var(--color-surface)] transition-[color,background-color,box-shadow] duration-150 ease-out " +
+    baseStyle: 
+    // `relative` positions the press <Ripple /> layer (selectable pills only).
+    "relative inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
+        "ring-1 bg-[var(--color-surface)] transition-[color,background-color,box-shadow] duration-[var(--motion-duration-fast)] ease-out " +
         "text-[var(--color-text-primary)] ring-[var(--color-border)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     /**

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

@@ -45,11 +45,22 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
             ((_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]")) {
+        // Ignore clicks that land inside a DESCENDANT 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.
+        //
+        // The bail only protects against a DESCENDANT portal, not an ANCESTOR
+        // one: when this popover's own trigger lives inside another overlay
+        // (e.g. a Popover opened from inside a Modal), a click on that host
+        // overlay's body content also matches `closest("[data-flikkui-portal]")`
+        // — it finds the Modal's portal wrapper, which contains our trigger.
+        // That's a real outside click and must still close the popover. Only
+        // bail when the matched portal does NOT contain our trigger — i.e.
+        // it's a portal we opened ourselves, not the one hosting us.
+        const portalEl = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]");
+        if (portalEl && !portalEl.contains(triggerRef.current)) {
             return;
         }
         if (closeOnClickOutside && !preventClose) {

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

@@ -1,29 +1,4 @@
 import React from "react";
 import { ProgressProps } from "./Progress.types";
-/**
- * Progress component - Linear progress bar for tracking completion
- *
- * Features:
- * - Determinate mode: Shows specific progress value (0-100)
- * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes with default primary color
- * - className controls the fill bar color (the primary styling target)
- * - wrapperClassName controls the outer container
- * - Flexible label positioning (right, top, bottom, inside)
- * - Respects reduced motion preferences
- *
- * @example
- * // Default (primary color)
- * <Progress value={60} />
- *
- * // Custom fill color via className
- * <Progress value={70} className="bg-[var(--color-success)]" />
- *
- * // With label
- * <Progress value={75} showLabel labelPosition="right" />
- *
- * // Indeterminate (loading)
- * <Progress />
- */
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export { Progress };