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

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

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import '../Modal/Modal.js';
 import { modalTheme, modalSizeVariants } from '../Modal/Modal.theme.js';
 import { SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
-import { ArrowLeftIcon } from '@heroicons/react/24/outline';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { modalStackTheme } from './ModalStack.theme.js';
 import { Link } from '../Link/Link.js';
 import { ModalContext } from '../Modal/ModalContext.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(ArrowLeftIcon, { 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

@@ -14,7 +14,8 @@ import { useSidebarContext, useAccordionNavContext, useSidebarDensity } from '..
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
-import { ChevronDownIcon } from '@heroicons/react/20/solid';
+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) => {
@@ -125,7 +126,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
             return (jsx("span", { className: cn(navItemTheme.notificationDot, customTheme.notificationDot) }));
         }
         if (typeof notification === "number" && notification > 0) {
-            return (jsx(Badge, { color: "neutral", variant: "soft", size: "sm", children: notification > 99 ? "99+" : notification }));
+            return (jsx(Badge, { color: "mono", variant: "soft", size: "sm", children: notification > 99 ? "99+" : notification }));
         }
         return null;
     }, [notification, customTheme.notificationDot]);
@@ -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(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;
+    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
@@ -255,7 +256,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                                 delay: idx * 0.055,
                                 duration: 0.16,
                                 ease: "easeOut",
-                            }, className: "absolute left-[-6px] top-1/2 h-[calc(100%+0.125rem)] w-px origin-top bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-600)]", "aria-hidden": "true" })), jsx(motion.span, { initial: { opacity: 0, scale: 0.5 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.5 }, transition: {
+                            }, className: "absolute left-[-6px] top-1/2 h-[calc(100%+0.125rem)] w-px origin-top bg-[var(--color-mono-400)] dark:bg-[var(--color-mono-600)]", "aria-hidden": "true" })), jsx(motion.span, { initial: { opacity: 0, scale: 0.5 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.5 }, transition: {
                                 delay: idx * 0.055,
                                 type: "spring",
                                 stiffness: 520,
@@ -263,7 +264,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                                 mass: 0.6,
                             }, className: cn("absolute left-[-8.5px] top-1/2 z-10 size-1.5 -translate-y-1/2 rounded-full", item.active
                                 ? "bg-[var(--color-primary)]"
-                                : "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-600)]"), "aria-hidden": "true" }), jsx(motion.div, { initial: { opacity: 0, x: -6 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -6 }, transition: {
+                                : "bg-[var(--color-mono-400)] dark:bg-[var(--color-mono-600)]"), "aria-hidden": "true" }), jsx(motion.div, { initial: { opacity: 0, x: -6 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -6 }, transition: {
                                 delay: idx * 0.055 + 0.035,
                                 type: "spring",
                                 stiffness: 460,
@@ -291,7 +292,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                                     return (jsx("span", { className: cn(theme.notificationDot, customTheme.notificationDot) }));
                                 }
                                 if (typeof item.notification === "number" && item.notification > 0) {
-                                    return (jsx(Badge, { color: "neutral", variant: "soft", size: "sm", children: item.notification > 99 ? "99+" : item.notification }));
+                                    return (jsx(Badge, { color: "mono", variant: "soft", size: "sm", children: item.notification > 99 ? "99+" : item.notification }));
                                 }
                                 return null;
                             })();

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.animations.d.ts

@@ -0,0 +1,22 @@
+import type { Variants } from "motion/react";
+import type { OfflineIndicatorPosition, OfflineIndicatorVariant } from "./OfflineIndicator.types";
+/**
+ * Custom spring preset for offline indicator to give it a satisfying, subtle bounce.
+ */
+export declare const indicatorSpring: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Generates context-aware animation variants for OfflineIndicator.
+ * Dynamically adjusts translation side/axis based on screen placement.
+ */
+/**
+ * Fade-only variants for prefers-reduced-motion users — the status pill
+ * still appears/disappears (it's a role="status" signal), just without
+ * translation, scale, or bounce.
+ */
+export declare const reducedMotionIndicatorVariants: Variants;
+export declare const getOfflineIndicatorVariants: (position: OfflineIndicatorPosition, variant: OfflineIndicatorVariant) => Variants;

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

@@ -0,0 +1,54 @@
+"use client";
+/**
+ * Custom spring preset for offline indicator to give it a satisfying, subtle bounce.
+ */
+const indicatorSpring = {
+    type: "spring",
+    stiffness: 260,
+    damping: 26,
+    mass: 1,
+};
+/**
+ * Generates context-aware animation variants for OfflineIndicator.
+ * Dynamically adjusts translation side/axis based on screen placement.
+ */
+/**
+ * Fade-only variants for prefers-reduced-motion users — the status pill
+ * still appears/disappears (it's a role="status" signal), just without
+ * translation, scale, or bounce.
+ */
+const reducedMotionIndicatorVariants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1, transition: { duration: 0.15 } },
+    exit: { opacity: 0, transition: { duration: 0.15 } },
+};
+const getOfflineIndicatorVariants = (position, variant) => {
+    const isTop = position.startsWith("top");
+    // Toast variants slide and scale, Banner variants just slide to maintain bleed styling
+    const yOffset = isTop ? -24 : 24;
+    const initialScale = variant === "banner" ? 1 : 0.92;
+    return {
+        initial: {
+            opacity: 0,
+            y: yOffset,
+            scale: initialScale,
+        },
+        animate: {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            transition: indicatorSpring,
+        },
+        exit: {
+            opacity: 0,
+            y: yOffset,
+            scale: initialScale,
+            transition: {
+                duration: 0.18,
+                ease: "easeIn",
+            },
+        },
+    };
+};
+
+export { getOfflineIndicatorVariants, indicatorSpring, reducedMotionIndicatorVariants };

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

@@ -1,13 +1,19 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useMemo } from 'react';
-import { SignalSlashIcon, CheckCircleIcon } from '@heroicons/react/24/solid';
-import { AnimatePresence, motion } from 'motion/react';
+import { WifiSlash, CheckCircle } from '@phosphor-icons/react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useNetworkStatus } from '../../../hooks/useNetworkStatus.js';
 import { getDefaultQueue } from '../../../utils/actionQueue.js';
+import { Link } from '../Link/Link.js';
+import { reducedMotionIndicatorVariants, getOfflineIndicatorVariants } from './OfflineIndicator.animations.js';
 import { offlineIndicatorTheme } from './OfflineIndicator.theme.js';
 
+const isOfflineIndicatorAction = (action) => typeof action === "object" &&
+    action !== null &&
+    "label" in action &&
+    "onClick" in action;
 /**
  * OfflineIndicator - Visual indicator for offline status
  *
@@ -21,9 +27,10 @@ import { offlineIndicatorTheme } from './OfflineIndicator.theme.js';
  * // Custom position and variant
  * <OfflineIndicator position="bottom-right" variant="badge" />
  */
-const OfflineIndicator = React__default.forwardRef(({ position = "top", showQueueCount = false, queue, variant = "toast", autoHideOnline = true, autoHideDelay = 5000, offlineMessage = "You're offline", onlineMessage = "Back online", className, }, ref) => {
-    var _a, _b;
+const OfflineIndicator = React__default.forwardRef(({ position = "top", showQueueCount = false, queue, variant = "toast", autoHideOnline = true, autoHideDelay = 5000, offlineMessage = "You're offline", onlineMessage = "Back online", action, className, }, ref) => {
+    var _a, _b, _c;
     const theme = offlineIndicatorTheme;
+    const shouldReduceMotion = useReducedMotion();
     const { isOnline, wasOffline } = useNetworkStatus();
     const [isVisible, setIsVisible] = useState(false);
     const [queueSize, setQueueSize] = useState(0);
@@ -73,29 +80,21 @@ const OfflineIndicator = React__default.forwardRef(({ position = "top", showQueu
         autoHideOnline,
         autoHideDelay,
     ]);
-    // Animation variants
-    const animationVariants = useMemo(() => ({
-        initial: {
-            opacity: 0,
-            y: position.startsWith("top") ? -20 : 20,
-            scale: 0.95,
-        },
-        animate: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-        },
-        exit: {
-            opacity: 0,
-            y: position.startsWith("top") ? -20 : 20,
-            scale: 0.95,
-        },
-    }), [position]);
+    // Animation variants — fade-only under prefers-reduced-motion (§12)
+    const animationVariants = useMemo(() => shouldReduceMotion
+        ? reducedMotionIndicatorVariants
+        : getOfflineIndicatorVariants(position, variant), [shouldReduceMotion, position, variant]);
     const isOffline = !isOnline;
-    const Icon = isOffline ? SignalSlashIcon : CheckCircleIcon;
+    const Icon = isOffline ? WifiSlash : CheckCircle;
     const message = isOffline ? offlineMessage : onlineMessage;
     const stateStyle = isOffline ? theme.offline : theme.online;
-    return (jsx(AnimatePresence, { children: isVisible && (jsxs(motion.div, { ref: ref, initial: "initial", animate: "animate", exit: "exit", variants: animationVariants, transition: { duration: 0.2, ease: "easeOut" }, className: cn(theme.base, (_a = theme.positions) === null || _a === void 0 ? void 0 : _a[position], (_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant], stateStyle, className), role: "status", "aria-live": "polite", children: [jsx(Icon, { className: theme.icon, "aria-hidden": "true" }), jsxs("span", { className: theme.message, children: [message, showQueueCount && queueSize > 0 && isOffline && (jsxs("span", { className: theme.queueCount, children: ["(", queueSize, " action", queueSize !== 1 ? "s" : "", " queued)"] }))] })] })) }));
+    // No `layout` on the root motion.div: its FLIP transform would fight the
+    // y/scale enter/exit variants on the same element (the documented
+    // concurrent layout+transform trap). Content-size changes animate via the
+    // children's layout="position" instead.
+    return (jsx(AnimatePresence, { children: isVisible && (jsxs(motion.div, { ref: ref, initial: "initial", animate: "animate", exit: "exit", variants: animationVariants, className: cn(theme.base, variant === "banner"
+                ? (_a = theme.bannerPositions) === null || _a === void 0 ? void 0 : _a[position]
+                : (_b = theme.positions) === null || _b === void 0 ? void 0 : _b[position], (_c = theme.variants) === null || _c === void 0 ? void 0 : _c[variant], stateStyle, className), role: "status", "aria-live": "polite", children: [jsx("div", { className: "relative size-3.5 flex-shrink-0", children: jsx(AnimatePresence, { mode: "popLayout", children: jsx(motion.div, { initial: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.5, rotate: -45 }, animate: shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, rotate: 0 }, exit: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.5, rotate: 45 }, transition: { duration: 0.25 }, className: "absolute inset-0 flex items-center justify-center", children: jsx(Icon, { className: "size-full", "aria-hidden": "true" }) }, isOffline ? "offline" : "online") }) }), jsxs(motion.span, { layout: shouldReduceMotion ? false : "position", className: theme.message, children: [message, jsx(AnimatePresence, { mode: "popLayout", children: showQueueCount && queueSize > 0 && isOffline && (jsxs(motion.span, { initial: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.8 }, animate: shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }, exit: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.8 }, transition: { duration: 0.18 }, className: theme.queueCount, children: ["(", queueSize, " action", queueSize !== 1 ? "s" : "", " queued)"] })) })] }), jsx(AnimatePresence, { children: action != null && isOffline && (jsx(motion.div, { layout: shouldReduceMotion ? false : "position", initial: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.9 }, animate: shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }, exit: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.9 }, transition: { duration: 0.2 }, className: "inline-flex items-center flex-shrink-0", children: isOfflineIndicatorAction(action) ? (jsx(Link, { size: "sm", onClick: action.onClick, className: theme.action, children: action.label })) : (action) })) })] })) }));
 });
 OfflineIndicator.displayName = "OfflineIndicator";
 

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

@@ -1,5 +1,5 @@
 const offlineIndicatorTheme = {
-    base: "fixed z-50 flex items-center gap-2 transition-all 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",
@@ -8,14 +8,35 @@ const offlineIndicatorTheme = {
         "bottom-left": "bottom-4 left-4",
         "bottom-right": "bottom-4 right-4",
     },
+    // Banner is an edge-to-edge bar, so it collapses every position to the
+    // flush viewport edge — only the top/bottom half of `position` matters.
+    bannerPositions: {
+        top: "top-0",
+        bottom: "bottom-0",
+        "top-left": "top-0",
+        "top-right": "top-0",
+        "bottom-left": "bottom-0",
+        "bottom-right": "bottom-0",
+    },
     variants: {
-        banner: "w-full left-0 right-0 px-4 py-1 justify-center rounded-none shadow-real-lg",
-        toast: "px-3 py-2 rounded-[var(--radius-base)] shadow-real-lg",
+        // translate-x-0 cancels the centered positions' -translate-x-1/2 (cn's
+        // tailwind-merge lets the variant win) — without it the full-width bar
+        // is dragged left by half its own width and clips off-screen.
+        banner: "w-full left-0 right-0 translate-x-0 px-4 py-1 justify-center rounded-none shadow-real-lg",
+        toast: "px-3 py-2 rounded-[var(--toast-radius)] shadow-real-xl",
     },
-    offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-[var(--color-neutral-100)]",
+    // Filled-neutral pill: the bare neutral token flips light/dark on its own
+    // (dark near-black pill in light mode, light pill in dark mode) and
+    // -contrast auto-derives — no hand-picked rungs or dark: inversions (§3).
+    offline: "bg-[var(--color-mono)]/90 backdrop-blur-sm text-[var(--color-mono-contrast)]",
     online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
-    icon: "size-4 flex-shrink-0",
-    message: "text-xs font-medium",
+    // text-inherit keeps the link legible on the inverse pill in BOTH modes
+    // (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",
+    // 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/OfflineIndicator/OfflineIndicator.types.d.ts

@@ -1,4 +1,12 @@
+import type { ReactNode } from "react";
 import type { ActionQueue } from "../../../utils/actionQueue";
+/**
+ * Declarative action rendered after the offline message (e.g. a retry link)
+ */
+export interface OfflineIndicatorAction {
+    label: string;
+    onClick: () => void;
+}
 /**
  * Position options for OfflineIndicator
  */
@@ -27,6 +35,11 @@ export interface OfflineIndicatorProps {
     offlineMessage?: string;
     /** Custom online message (shown briefly when reconnecting) */
     onlineMessage?: string;
+    /**
+     * Action shown next to the message while offline — pass `{ label, onClick }`
+     * for a link-styled button (mirrors Toast's `action`), or any ReactNode.
+     */
+    action?: OfflineIndicatorAction | ReactNode;
     /** Additional class names */
     className?: string;
 }
@@ -38,6 +51,8 @@ export interface OfflineIndicatorTheme {
     base?: string;
     /** Position-specific styles */
     positions?: Record<OfflineIndicatorPosition, string>;
+    /** Position overrides for the full-bleed banner variant (flush to the viewport edge, no inset) */
+    bannerPositions?: Record<OfflineIndicatorPosition, string>;
     /** Variant-specific styles */
     variants?: {
         banner?: string;
@@ -48,6 +63,8 @@ export interface OfflineIndicatorTheme {
     offline?: string;
     /** Online (reconnected) state styles */
     online?: string;
+    /** Action link styles */
+    action?: string;
     /** Icon styles */
     icon?: string;
     /** Message text styles */

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-xl 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/PageHeading/PageHeadingBackButton.js

@@ -2,11 +2,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { ArrowLeftIcon } from '@heroicons/react/20/solid';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { Link } from '../Link/Link.js';
 
 const PageHeadingBackButton = React__default.forwardRef(({ label = "Back", onClick, className, ...props }, ref) => {
-    return (jsxs(Link, { ref: ref, color: "neutral", size: "sm", onClick: onClick, className: cn("mb-2 w-fit", className), ...props, children: [jsx(ArrowLeftIcon, { className: "size-4" }), typeof label === 'string'
+    return (jsxs(Link, { ref: ref, color: "mono", size: "sm", onClick: onClick, className: cn("mb-2 w-fit", className), ...props, children: [jsx(ArrowLeft, { className: "size-4" }), typeof label === 'string'
                 ? jsx("span", { children: label })
                 : label] }));
 });

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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useMemo, useCallback } from 'react';
 import { paginationTheme } from './Pagination.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
+import { CaretDoubleLeft, CaretLeft, CaretRight, CaretDoubleRight } from '@phosphor-icons/react';
 
 /**
  * Internal PaginationItem component for page numbers and ellipsis
@@ -83,14 +83,14 @@ const Pagination = React__default.forwardRef(({ currentPage, totalPages, onPageC
     // on page 1, or "(totalPages + 1)" on the last page).
     const previousPageLabelNumber = Math.max(currentPage - 1, 1);
     const nextPageLabelNumber = Math.min(currentPage + 1, totalPages);
-    return (jsxs("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props, children: [showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page", children: [jsx(ChevronDoubleLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "First" })] })), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${previousPageLabelNumber})`, children: [jsx(ChevronLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Previous" })] })), paginationRange.map((pageNumber, index) => {
+    return (jsxs("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props, children: [showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page", children: [jsx(CaretDoubleLeft, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "First" })] })), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${previousPageLabelNumber})`, children: [jsx(CaretLeft, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Previous" })] })), paginationRange.map((pageNumber, index) => {
                 if (pageNumber === "...") {
                     return (jsx("span", { role: "separator", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`));
                 }
                 const page = pageNumber;
                 const isActive = page === currentPage;
                 return (jsxs(PaginationItem, { size: size, variant: "page", isActive: isActive, onClick: () => handlePageChange(page), "aria-label": isActive ? `Page ${page}, current page` : `Go to page ${page}`, children: [page, isActive && jsx("span", { className: "sr-only", children: "(current)" })] }, page));
-            }), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "aria-label": `Go to next page (${nextPageLabelNumber})`, children: [jsx(ChevronRightIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Next" })] })), showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(totalPages), "aria-label": "Go to last page", children: [jsx(ChevronDoubleRightIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Last" })] }))] }));
+            }), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "aria-label": `Go to next page (${nextPageLabelNumber})`, children: [jsx(CaretRight, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Next" })] })), showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(totalPages), "aria-label": "Go to last page", children: [jsx(CaretDoubleRight, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Last" })] }))] }));
 });
 Pagination.displayName = "Pagination";
 

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

@@ -7,21 +7,21 @@ 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-neutral-900)] " +
+        "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
         "cursor-pointer bg-white border border-transparent text-[var(--color-text-muted)] " +
         // 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
         "data-[active=true]:bg-white data-[active=true]:border-[var(--color-border)] data-[active=true]:text-[var(--color-text-primary)] " +
         // Active state - dark (uses primary color accent)
-        "dark:data-[active=true]:bg-[var(--color-neutral-800)] dark:data-[active=true]:border-none dark:data-[active=true]:text-[var(--color-text-primary)] " +
+        "dark:data-[active=true]:bg-[var(--color-mono-800)] dark:data-[active=true]:border-none dark:data-[active=true]:text-[var(--color-text-primary)] " +
         // Disabled state
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes
@@ -30,7 +30,7 @@ const paginationTheme = {
         md: "size-10 min-w-[2.5rem] text-sm",
     },
     // Ellipsis styles
-    ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",
+    ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] cursor-default pointer-events-none",
 };
 
 export { paginationTheme };

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

@@ -3,9 +3,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { pillTheme } from './Pill.theme.js';
-import { pillTapVariant } from './Pill.animations.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)
+const PILL_PRESS_VARIANTS = createPressVariants(0.97, 1.02);
 /**
  * Pill component - Simplified selectable chip for filters and tags
  *
@@ -120,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
-        whileTap: isInteractive && !shouldReduceMotion ? pillTapVariant : 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-all duration-300 " +
+    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)]",
     /**
@@ -26,10 +28,12 @@ const pillTheme = {
     /**
      * Size variants
      */
+    // Paddings tokenised (--pill-px-*/--pill-py-*) so a theme can grow the chip
+    // tier alongside its controls — defaults are px-2.5/px-3 + py-0.5/py-1.
     sizes: {
-        sm: "text-xs px-2.5 py-0.5 gap-0.5",
-        md: "text-sm px-2.5 py-0.5 gap-1",
-        lg: "text-sm px-3 py-1 gap-1.5",
+        sm: "text-xs px-[var(--pill-px-sm)] py-[var(--pill-py-sm)] gap-0.5",
+        md: "text-sm px-[var(--pill-px-md)] py-[var(--pill-py-md)] gap-1",
+        lg: "text-sm px-[var(--pill-px-lg)] py-[var(--pill-py-lg)] gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

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 };