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

package/dist/components/core/Badge/Badge.js

@@ -1,55 +1,37 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useCallback } from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
-import { X } from '@phosphor-icons/react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
-import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
+import { badgeVariants, dotVariants } from './Badge.animations.js';
 import { badgeTheme } from './Badge.theme.js';
 
 /**
- * Badge component for displaying status, labels, or counters.
+ * Badge — a non-interactive status/metadata label.
+ *
+ * 🔴 Badge is deliberately a PURE LABEL: no dismiss, no disabled, no blessed
+ * click target. For a removable chip use `Tag`; for a selectable filter chip use
+ * `Pill`; for anything that performs an action use `Button`. See CLAUDE.md §8b.
  *
  * @component
  * @example
  * ```tsx
- * <Badge variant="primary" size="md" pill>New Feature</Badge>
- * <Badge variant="success" withDot>Ready</Badge>
- * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
+ * <Badge color="primary" size="md" pill>New Feature</Badge>
+ * <Badge color="success" withDot>Ready</Badge>
  * ```
  */
-const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, darkMode = false, ...props }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    // State management
-    const [isVisible, setIsVisible] = useState(true);
+const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "soft", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, maxWidth, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     // useReducedMotion is SSR-safe (returns null on server, actual value after hydration)
     const prefersReducedMotion = useReducedMotion();
     const shouldAnimate = !prefersReducedMotion;
     // Development-only warnings
     if (process.env.NODE_ENV !== "production") {
-        if (dismissible && !onDismiss) {
-            console.warn("[Badge]: onDismiss prop is required when dismissible is true");
-        }
         if (avatar && iconStart) {
             console.warn("[Badge]: Both avatar and iconStart provided. Avatar takes precedence.");
         }
     }
-    // Handle dismiss button click
-    const handleDismiss = useCallback((e) => {
-        e.stopPropagation();
-        setIsVisible(false);
-        // Delay the onDismiss call until after the animation
-        setTimeout(() => {
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e);
-        }, animationTiming.dismissDelay);
-    }, [onDismiss]);
-    // Handle badge click
-    const handleClick = useCallback((e) => {
-        if (disabled)
-            return;
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }, [onClick, disabled]);
     // Merge default theme with custom theme overrides
     const theme = {
         ...badgeTheme,
@@ -76,6 +58,10 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.sizes,
             ...customTheme.sizes,
         },
+        radiusSizes: {
+            ...badgeTheme.radiusSizes,
+            ...customTheme.radiusSizes,
+        },
         pillSizes: {
             ...badgeTheme.pillSizes,
             ...customTheme.pillSizes,
@@ -88,18 +74,10 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.avatarSizes,
             ...customTheme.avatarSizes,
         },
-        dismissSizes: {
-            ...badgeTheme.dismissSizes,
-            ...customTheme.dismissSizes,
-        },
         dotColors: {
             ...badgeTheme.dotColors,
             ...customTheme.dotColors,
         },
-        states: {
-            ...badgeTheme.states,
-            ...customTheme.states,
-        },
     };
     // Get styles from theme
     const variantStyles = ((_g = theme.variants) === null || _g === void 0 ? void 0 : _g[variant]) || "";
@@ -107,22 +85,16 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     const sizeStyle = ((_k = theme.sizes) === null || _k === void 0 ? void 0 : _k[size]) || "";
     const shapeStyle = pill
         ? "rounded-full"
-        : "rounded-[var(--badge-radius)]";
-    const dotColorStyle = ((_l = theme.dotColors) === null || _l === void 0 ? void 0 : _l[color]) || "";
-    // Build base styles with all states
-    const isInteractive = dismissible;
-    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_m = theme.pillSizes) === null || _m === void 0 ? void 0 : _m[size]), isInteractive && "cursor-pointer", disabled && ((_o = theme.states) === null || _o === void 0 ? void 0 : _o.disabled), darkMode && "dark", className);
+        : ((_l = theme.radiusSizes) === null || _l === void 0 ? void 0 : _l[size]) || "";
+    const dotColorStyle = ((_m = theme.dotColors) === null || _m === void 0 ? void 0 : _m[color]) || "";
+    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_o = theme.pillSizes) === null || _o === void 0 ? void 0 : _o[size]), darkMode && "dark", className);
     // Create data attributes for styling hooks
     const dataAttributes = {
         "data-variant": variant,
         "data-color": color,
         "data-size": size,
-        "data-state": isVisible ? "visible" : "hidden",
         "data-pill": pill ? "true" : "false",
         "data-with-dot": withDot ? "true" : "false",
-        "data-dismissible": dismissible ? "true" : "false",
-        "data-disabled": disabled ? "true" : "false",
-        "data-interactive": isInteractive ? "true" : "false",
     };
     // Render left content (priority: avatar → iconStart → dot)
     const renderLeftContent = () => {
@@ -146,25 +118,16 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         }
         return null;
     };
+    const content = (jsxs(Fragment, { children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+                    ? {
+                        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+                    }
+                    : undefined, children: children })] }));
     if (!shouldAnimate) {
         // Spread props directly — Badge only receives HTMLSpanElement attributes
-        const restHtmlProps = props;
-        // Non-animated render for reduced-motion environments
-        return isVisible ? (jsxs("span", { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, ...dataAttributes, ...restHtmlProps, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
-                        ? {
-                            maxWidth: typeof maxWidth === "number"
-                                ? `${maxWidth}px`
-                                : maxWidth,
-                        }
-                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -mr-0.5 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, children: jsx(X, { className: cn("badge-dismiss-icon", (_p = theme.dismissSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-hidden": "true" }) }))] })) : null;
+        return (jsx("span", { ref: ref, className: baseStyles, ...dataAttributes, ...props, children: content }));
     }
-    return (jsx(AnimatePresence, { mode: "wait", children: isVisible && (jsxs(motion.span, { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", ...dataAttributes, ...props, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
-                        ? {
-                            maxWidth: typeof maxWidth === "number"
-                                ? `${maxWidth}px`
-                                : maxWidth,
-                        }
-                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -mr-0.5 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(X, { className: cn("badge-dismiss-icon", (_q = theme.dismissSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true", weight: "bold" }) }))] })) }));
+    return (jsx(motion.span, { ref: ref, className: baseStyles, variants: badgeVariants, initial: "initial", animate: "animate", ...dataAttributes, ...props, children: content }));
 }));
 Badge.displayName = "Badge";
 

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

@@ -8,7 +8,7 @@ const badgeTheme = {
     // treats font-size as owning line-height, so any leading class here is silently dropped.
     // The badge therefore uses the `text-xs` ramp line-height (16px) → 22px tall.
     // To change it, put the leading class in `sizes`, after `text-xs`.
-    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit w-fit tracking-tight font-medium border",
+    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-[var(--motion-duration-slow)] h-fit w-fit tracking-tight font-medium border",
     // Visual style variants (structure only, no colors)
     // All variants keep the 1px `border` from baseStyle so every variant is the
     // SAME height (variant must never change size). `filled` and `soft` make that
@@ -75,6 +75,13 @@ const badgeTheme = {
         sm: "text-xs px-[var(--badge-px-sm)] py-[var(--badge-py-sm)] gap-1",
         md: "text-xs px-[var(--badge-px-md)] py-[var(--badge-py-md)] gap-1",
     },
+    // Corner radius per size. NOT one shared value: the curve starts `radius` in
+    // from the edge while text starts `px + border` in, so the tighter box is the
+    // one whose glyphs land inside the curve. See theme.css for the full note.
+    radiusSizes: {
+        sm: "rounded-[var(--badge-radius-sm)]",
+        md: "rounded-[var(--badge-radius-md)]",
+    },
     // Additional padding for pill shape — must clear the rounded-full cap radius
     // (≈ height/2), otherwise content sits inside the curve and hugs the edge.
     pillSizes: {
@@ -91,12 +98,6 @@ const badgeTheme = {
         sm: "size-4",
         md: "size-5",
     },
-    // Dismiss icon sizes — match the text-xs cap (both badge sizes use text-xs) so
-    // the dismiss button never grows taller than the text and stretches the badge.
-    dismissSizes: {
-        sm: "size-3",
-        md: "size-3",
-    },
     // Dot inherits text color via currentColor — works across all variants/colors
     dotColors: {
         mono: "bg-current",
@@ -105,11 +106,6 @@ const badgeTheme = {
         warning: "bg-current",
         danger: "bg-current",
     },
-    // State styles
-    states: {
-        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
-        hover: "cursor-pointer",
-    },
 };
 
 export { badgeTheme };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent } from "react";
+import React, { ReactNode } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
 import type { MeshPaletteName } from "../../effects/MeshGradient";
 export type BadgeVariant = "filled" | "outline" | "soft";
@@ -25,6 +25,10 @@ export interface BadgeTheme {
      * Styles for each badge size (flat structure)
      */
     sizes: Record<BadgeSize, string>;
+    /**
+     * Corner radius for each badge size (ignored when `pill` is set)
+     */
+    radiusSizes: Record<BadgeSize, string>;
     /**
      * Additional padding for pill-shaped badges
      */
@@ -37,21 +41,10 @@ export interface BadgeTheme {
      * Avatar sizes for each badge size
      */
     avatarSizes: Record<BadgeSize, string>;
-    /**
-     * Dismiss icon sizes (button sizes itself from icon + padding)
-     */
-    dismissSizes: Record<BadgeSize, string>;
     /**
      * Color styles for dot indicators
      */
     dotColors: Record<BadgeColor, string>;
-    /**
-     * State styles (disabled, hover, selected)
-     */
-    states: {
-        disabled: string;
-        hover: string;
-    };
 }
 /**
  * Theme overrides for Badge component
@@ -61,15 +54,11 @@ export interface BadgeThemeOverrides {
     variants?: Partial<Record<BadgeVariant, string>>;
     variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
+    radiusSizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
-    dismissSizes?: Partial<Record<BadgeSize, string>>;
     dotColors?: Partial<Record<BadgeColor, string>>;
-    states?: Partial<{
-        disabled: string;
-        hover: string;
-    }>;
 }
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "inputMode"> {
     /**
@@ -77,8 +66,18 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
      */
     children: ReactNode;
     /**
-     * The visual style variant of the badge (filled, outline, soft)
-     * @default 'filled'
+     * The visual style variant of the badge.
+     *
+     * `soft` is the default because a badge is a STATUS/METADATA label, not an
+     * action — a tinted chip is the idiom, and a full-strength fill overstates a
+     * label sitting next to real controls. Pick a non-default deliberately:
+     * - `filled`  — on imagery/gradients, or a genuine emphasis flag ("NEW")
+     * - `outline` — quiet keyword tags; in practice only reads well at `color="mono"`
+     *
+     * (Button defaults to `filled` — an action SHOULD be the loudest thing. Same
+     * vocabulary, opposite default, on purpose. See CLAUDE.md §8.)
+     *
+     * @default 'soft'
      */
     variant?: BadgeVariant;
     /**
@@ -127,21 +126,6 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
         /** Raw gradient color override; wins over `gradientVariant`. */
         gradientColors?: string[];
     };
-    /**
-     * Whether the badge is dismissible (shows close button)
-     * @default false
-     */
-    dismissible?: boolean;
-    /**
-     * Callback when close button is clicked
-     * Required when dismissible is true
-     */
-    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Whether the badge is disabled
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * Maximum width before truncating the label
      * Accepts CSS width value (e.g., '100px', '10rem') or number (pixels)

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

@@ -7,10 +7,10 @@ import { CaretRight } from '@phosphor-icons/react';
  * Simple layout styles are inlined in the component
  */
 const breadcrumbsTheme = {
-    link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
+    link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-[var(--motion-duration-fast)] font-medium",
     current: "text-[var(--color-text-primary)] font-medium",
     separator: "text-[var(--color-text-muted)] select-none",
-    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-surface-hover)]",
+    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-[var(--motion-duration-fast)] cursor-pointer p-1 rounded hover:bg-[var(--color-surface-hover)]",
 };
 /**
  * Variant styles for different breadcrumb appearances
@@ -18,10 +18,10 @@ const breadcrumbsTheme = {
 const breadcrumbsVariants = {
     default: {},
     muted: {
-        link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 font-normal",
+        link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-[var(--motion-duration-fast)] font-normal",
         current: "text-[var(--color-text-secondary)] font-normal",
         separator: "text-[var(--color-border)]",
-        ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
+        ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-[var(--motion-duration-fast)] cursor-pointer p-1 rounded hover:bg-[var(--color-surface)]",
     },
 };
 /**

package/dist/components/core/Button/Button.js

@@ -1,25 +1,19 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useCallback, useRef } from 'react';
+import React__default, { useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from './Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { Spinner } from '../Spinner/Spinner.js';
-import { useRipple, getRippleAnimation, getRippleColorClass } from './Button.ripple.js';
+import { Ripple } from '../shared/Ripple.js';
 import { createPressVariants } from '../shared/interaction.animations.js';
 
 // Shared press physics (module-level constant)
 const BUTTON_PRESS_VARIANTS = createPressVariants(0.97);
-const Button = React__default.forwardRef(({ children, iconStart, iconEnd, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
+const Button = React__default.forwardRef(({ children, iconStart, iconEnd, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
-    // Initialize ripple hook
-    const { ripples, createRipple, buttonRef, effect } = useRipple({
-        scale: rippleScale,
-        duration: 600,
-        effect: rippleEffect,
-    });
     // Resolve color and variant with defaults
     const resolvedColor = color || "primary";
     const resolvedVariant = variant || "filled";
@@ -34,13 +28,10 @@ const Button = React__default.forwardRef(({ children, iconStart, iconEnd, classN
         }
     }
     // Safe onClick handler - respect both state="disabled" and disabled={true}
+    // (the ripple wires itself to the DOM node — see <Ripple /> below)
     const handleClick = useCallback((event) => {
         if (isDisabled)
             return;
-        // Create ripple effect if enabled
-        if (enableRipple && !shouldReduceMotion) {
-            createRipple(event);
-        }
         try {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
@@ -50,7 +41,7 @@ const Button = React__default.forwardRef(({ children, iconStart, iconEnd, classN
                 console.error("Error in button click handler:", error);
             }
         }
-    }, [onClick, isDisabled, enableRipple, shouldReduceMotion, createRipple]);
+    }, [onClick, isDisabled]);
     // Compute theme classes (direct computation - faster than useMemo)
     const sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : "default"]) || "";
     const colorClasses = ((_c = buttonTheme.variantColors[resolvedVariant]) === null || _c === void 0 ? void 0 : _c[resolvedColor]) || "";
@@ -84,36 +75,9 @@ const Button = React__default.forwardRef(({ children, iconStart, iconEnd, classN
     // single time below, instead of spreading `restProps` and then
     // unconditionally overwriting it with `state`.
     const consumerDataState = restProps["data-state"];
-    // Track the latest forwarded ref to avoid mergedRef recreation on inline callback refs
-    const forwardedRef = useRef(ref);
-    forwardedRef.current = ref;
-    // Merge refs - stable callback that won't cause DOM detach/attach cycles
-    const mergedRef = useCallback((node) => {
-        // Set ripple's buttonRef
-        if (buttonRef) {
-            buttonRef.current = node;
-        }
-        // Set forwarded ref
-        const fRef = forwardedRef.current;
-        if (typeof fRef === "function") {
-            fRef(node);
-        }
-        else if (fRef) {
-            fRef.current =
-                node;
-        }
-    }, [buttonRef]);
-    return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": consumerDataState !== null && consumerDataState !== void 0 ? consumerDataState : state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
+    return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: ref, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": consumerDataState !== null && consumerDataState !== void 0 ? consumerDataState : state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "ghost" &&
-                resolvedVariant !== "outline" && (jsx("div", { className: "pointer-events-none absolute inset-px border-t-[0.5px] border-white/50 rounded-[inherit] blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsxs("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: [iconStart && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_g = buttonTheme.iconSizes) === null || _g === void 0 ? void 0 : _g[size]), "aria-hidden": "true", children: iconStart })), children, iconEnd && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_h = buttonTheme.iconSizes) === null || _h === void 0 ? void 0 : _h[size]), "aria-hidden": "true", children: iconEnd }))] }), enableRipple &&
-                ripples.map((ripple) => {
-                    const animation = getRippleAnimation(effect, ripple, rippleScale);
-                    return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||
-                            getRippleColorClass(resolvedVariant, resolvedColor)), style: {
-                            top: ripple.y - 10,
-                            left: ripple.x - 10,
-                        } }, ripple.id));
-                })] }));
+                resolvedVariant !== "outline" && (jsx("div", { className: "pointer-events-none absolute inset-px border-t-[0.5px] border-white/50 rounded-[inherit] blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsxs("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: [iconStart && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_g = buttonTheme.iconSizes) === null || _g === void 0 ? void 0 : _g[size]), "aria-hidden": "true", children: iconStart })), children, iconEnd && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_h = buttonTheme.iconSizes) === null || _h === void 0 ? void 0 : _h[size]), "aria-hidden": "true", children: iconEnd }))] }), enableRipple && jsx(Ripple, {})] }));
 });
 // Set display name for dev tools and Storybook
 Button.displayName = "Button";

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

@@ -3,7 +3,7 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-[color,background-color,border-color,box-shadow,filter,opacity] duration-150 ease-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-[color,background-color,border-color,box-shadow,filter,opacity] duration-[var(--motion-duration-fast)] ease-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
         filled: "border border-black/15 hover:brightness-[0.9] dark:hover:brightness-[1.15]",
@@ -35,7 +35,7 @@ const buttonTheme = {
             mono: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " +
                 "hover:bg-[var(--color-mono-100)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:hover:bg-[var(--color-background-secondary)]",
+                "dark:hover:bg-[var(--color-surface)]",
             primary: "text-[var(--color-text-primary)] border-[var(--color-primary-600)]/30 " +
                 "hover:bg-[var(--color-primary-100)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
@@ -87,15 +87,15 @@ const buttonTheme = {
             // Tighten the corner radius at sm so a short button doesn't read as a pill
             // (overrides baseStyle's rounded-[var(--button-radius)] via twMerge).
             default: "font-medium min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-[length:var(--button-text-size-sm)]/[var(--button-line-height-sm)] rounded-[calc(var(--button-radius)*0.75)]",
-            iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)] rounded-[calc(var(--button-radius)*0.75)]",
+            iconOnly: "size-[var(--button-icon-square-sm)] p-[var(--button-icon-p-sm)] rounded-[calc(var(--button-radius)*0.75)]",
         },
         md: {
             default: "font-medium min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-[length:var(--button-text-size-md)]/[var(--button-line-height-md)]",
-            iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
+            iconOnly: "size-[var(--button-icon-square-md)] p-[var(--button-icon-p-md)]",
         },
         lg: {
             default: "font-medium min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-[length:var(--button-text-size-lg)]/[var(--button-line-height-lg)]",
-            iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
+            iconOnly: "size-[var(--button-icon-square-lg)] p-[var(--button-icon-p-lg)]",
         },
     },
     // Icon slot sizing. `[&>svg]:size-*` sizes the icon itself, so a caller passing a bare

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { RippleEffectType } from "./Button.ripple";
 /**
  * Button component props
  * @property {ButtonColor} color - The semantic color/intent of the button
@@ -8,10 +7,7 @@ import { RippleEffectType } from "./Button.ripple";
  * @property {ButtonState} state - The state of the button (default, loading, disabled)
  * @property {boolean} iconOnly - Whether the button should display as icon-only (square padding)
  * @property {boolean} block - Whether the button should be full width
- * @property {boolean} enableRipple - Whether to enable ripple effect on click
- * @property {RippleEffectType} rippleEffect - Type of ripple effect (default, aurora, particle, glass, neon, echo)
- * @property {string} rippleClassName - Custom class name for ripple styling
- * @property {number} rippleScale - Scale multiplier for ripple expansion (default: 10)
+ * @property {boolean} enableRipple - Whether to enable the press ripple
  */
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** The semantic color/intent of the button */
@@ -47,14 +43,14 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     children?: React.ReactNode;
     /** Additional class names */
     className?: string;
-    /** Whether to enable ripple effect on click */
+    /**
+     * Whether to show the press ripple.
+     *
+     * The ripple is pointer-only — keyboard activation gets the focus ring
+     * instead — and is suppressed automatically under `prefers-reduced-motion`.
+     * @default true
+     */
     enableRipple?: boolean;
-    /** Type of ripple effect: 'default' | 'aurora' | 'particle' | 'glass' | 'neon' | 'echo' */
-    rippleEffect?: RippleEffectType;
-    /** Custom class name for ripple styling */
-    rippleClassName?: string;
-    /** Scale multiplier for ripple expansion (default: 10) */
-    rippleScale?: number;
     /** Whether to show the glass reflection effect (default: true) */
     showReflection?: boolean;
     /**

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

@@ -1,4 +1,2 @@
 export { Button } from './Button';
 export * from './Button.types';
-export { useRipple, getRippleColorClass, getRippleAnimation } from './Button.ripple';
-export type { RippleEffectType, RippleConfig, Ripple } from './Button.ripple';

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

@@ -15,7 +15,7 @@ const calendarTheme = {
         "data-[range-pos=end]:rounded-r-full " +
         "data-[range-pos=single]:rounded-full",
     dayButtonStyle: "relative z-10 flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
-        "transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
+        "transition-all duration-[var(--motion-duration-base)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         // Base text color
         "text-[var(--color-text-primary)] " +
         // Hover state

package/dist/components/core/Calendar/CalendarMini/CalendarMini.theme.js

@@ -1,9 +1,9 @@
 const calendarMiniTheme = {
-    baseStyle: "flex items-center justify-center gap-1 transition-all duration-300 text-sm",
+    baseStyle: "flex items-center justify-center gap-1 transition-all duration-[var(--motion-duration-slow)] text-sm",
     monthRowStyle: "flex flex-1 gap-4 overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory px-4 ml-3",
     monthItemStyle: "font-semibold text-[var(--color-text-secondary)] cursor-pointer transition-colors hover:text-[var(--color-text-primary)] flex-shrink-0 snap-center data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:opacity-100",
     dateRowStyle: "relative overflow-hidden px-4 py-0.5",
-    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-background-secondary)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-background-secondary)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-background-secondary)]",
+    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-surface)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-surface)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-surface)]",
 };
 
 export { calendarMiniTheme };

package/dist/components/core/Card/Card.js

@@ -8,9 +8,10 @@ import { CardTitle } from './CardTitle.js';
 import { CardSubtitle } from './CardSubtitle.js';
 import { CardBody } from './CardBody.js';
 import { CardFooter } from './CardFooter.js';
+import { CardContext } from './CardContext.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, title, subtitle, actions, footer, elevation, lift, ...props }, ref) => {
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, title, subtitle, actions, footer, elevation, lift, inset = false, ...props }, ref) => {
     // Relative elevation: a Card lifts two rungs above its host substrate (base = 3, so a
     // standalone card on the floor reads rung 3). shadow:true (the engine default) supplies the
     // hairline ring + doubling shadow — the ONLY elevation cue in light mode, where rungs 3–8 are
@@ -20,11 +21,15 @@ const CardRoot = React__default.forwardRef(({ children, className, theme: custom
         ...cardTheme,
         ...customTheme,
     }), [customTheme]);
+    const cardContext = useMemo(() => ({ inset }), [inset]);
     const hasHeader = Boolean(title || subtitle || actions);
     // Slot-prop mode: any header/footer slot composes Header/Body/Footer for us.
     // Otherwise children render raw — the compound API path, unchanged.
     const managed = hasHeader || Boolean(footer);
-    return (jsx("div", { ref: ref, className: cn(surfaceClasses(surfaceLevel), theme.baseStyle, darkMode && "dark", className), ...props, children: jsx(SurfaceProvider, { level: surfaceLevel, children: managed ? (jsxs(Fragment, { children: [hasHeader && (jsxs(CardHeader, { className: actions ? "flex-row items-start justify-between gap-4" : undefined, children: [(title || subtitle) && (jsxs("div", { className: "flex flex-col", children: [title && jsx(CardTitle, { children: title }), subtitle && jsx(CardSubtitle, { children: subtitle })] })), actions && (jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions }))] })), children != null && jsx(CardBody, { children: children }), footer && jsx(CardFooter, { className: "justify-end gap-2", children: footer })] })) : (children) }) }));
+    return (jsx("div", { ref: ref, className: cn(surfaceClasses(surfaceLevel), 
+        // Overrides only the rung bg from surfaceClasses (twMerge, last wins) — its
+        // shadow and --field-fill survive, and `className` still wins over both.
+        inset && theme.baseStyleInset, theme.baseStyle, darkMode && "dark", className), ...props, children: jsx(CardContext.Provider, { value: cardContext, children: jsx(SurfaceProvider, { level: surfaceLevel, children: managed ? (jsxs(Fragment, { children: [hasHeader && (jsxs(CardHeader, { className: actions ? "flex-row items-start justify-between gap-4" : undefined, children: [(title || subtitle) && (jsxs("div", { className: "flex flex-col", children: [title && jsx(CardTitle, { children: title }), subtitle && jsx(CardSubtitle, { children: subtitle })] })), actions && (jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions }))] })), children != null && jsx(CardBody, { children: children }), footer && jsx(CardFooter, { className: "justify-end gap-2", children: footer })] })) : (children) }) }) }));
 });
 CardRoot.displayName = 'Card';
 // Create compound component with proper typing

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

@@ -5,7 +5,7 @@ const cardTheme = {
     headerStyle: "flex flex-col px-[var(--card-px)] py-[var(--card-py)] items-start",
     // text-[length:...] (not bare text-[var(...)]) is required — see TYPE ROLE
     // SYSTEM in theme.css for why a bare var() would resolve to color instead.
-    titleStyle: "text-[length:var(--card-title-size)] font-semibold leading-none text-[var(--color-text-primary)]",
+    titleStyle: "text-[length:var(--card-title-size)]/[var(--card-title-line-height)] font-semibold text-[var(--color-text-primary)]",
     subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-2",
     // Default to full py (top included). [[data-card-region]~&]:pt-0 zeroes the seam
     // ONLY when an actual region (Header/Body) precedes this one — a general-sibling
@@ -15,6 +15,34 @@ const cardTheme = {
     // takes no layout space, so Body silently lost its top padding.
     bodyStyle: "px-[var(--card-px)] py-[var(--card-py)] [[data-card-region]~&]:pt-0",
     footerStyle: "flex items-center px-[var(--card-px)] py-[var(--card-py)] [[data-card-region]~&]:pt-0",
+    // ── inset mode ─────────────────────────────────────────────────────────────
+    // PROTOTYPE GEOMETRY: the 12px gap and the 16px panel radius are hardcoded on
+    // purpose so the look can be tuned by eye first. Tokenise both afterwards
+    // (--card-inset-gap + a --card-panel-radius on the sm cap tier, per §3's
+    // nested-well rule) — this is the only place the numbers appear.
+    //
+    // The frame sinks rather than the body rising: light-mode rungs 3-8 are all
+    // #ffffff, so lifting the body a rung would paint nothing. bg here overrides
+    // the rung bg from surfaceClasses via twMerge while its shadow + --field-fill
+    // survive; the panel then picks the rung bg back up.
+    baseStyleInset: "bg-[var(--color-surface-sunken)]",
+    // Header keeps its full top padding; only the seam down to the panel collapses
+    // to the gap. `pb-3` lands after `py-[…]` so twMerge resolves the bottom side.
+    headerStyleInset: "pb-3",
+    // Deliberately NOT carrying bodyStyle's `[[data-card-region]~&]:pt-0` — the
+    // panel is a closed box and keeps uniform padding on all four sides.
+    //
+    // ALIGNMENT CONTRACT: content inside the panel must stay flush with the header
+    // and footer text on the tray. The panel is offset by the gap, so its own
+    // padding is that gap subtracted from the card padding — 12 + (24-12) = 24,
+    // the same inset the header sits at. Derived from --card-px/--card-py rather
+    // than hardcoded so it holds when a theme redefines the card padding.
+    // The `_` are required: they become spaces, and calc() treats `-` as an operator
+    // ONLY when whitespace-separated. `calc(var(--card-px)-12px)` parses as the invalid
+    // `var(--card-px) -12px`, which Tailwind silently drops — no class is emitted at all.
+    // When these move to tokens, wrap in max(0px, …) so a theme that sets the card
+    // padding below the gap can't produce negative padding.
+    bodyStyleInset: "mx-3 mb-3 rounded-2xl px-[calc(var(--card-px)_-_12px)] py-[calc(var(--card-py)_-_12px)]",
 };
 
 export { cardTheme };