@bug-on/m3-expressive 1.3.5 → 1.3.7

package/dist/{side-sheet-modal-Bd5Qqvp9.d.ts → side-sheet-modal-BfdgYjd3.d.ts}

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React$1 from 'react';
+import { B as BaseIconButtonProps } from './icon-button-DFXp9hze.js';
 import { MotionStyle, useMotionValue, useTransform } from 'motion/react';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
 
@@ -43,6 +44,49 @@ interface DialogProps {
 interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
     /** Hides the top-right close (X) button. @default false */
     hideCloseButton?: boolean;
+    /**
+     * Override any `IconButton` prop on the default close button.
+     *
+     * Common use cases:
+     * - `disabled` — prevent closing during form submission.
+     * - `aria-label` — i18n label (e.g. `"Đóng"`).
+     * - `colorStyle` — change visual style (`"filled"` restores original look).
+     * - `className` — reposition or override the default `absolute right-4 top-4`.
+     *
+     * These props are **merged** with the library defaults — you only need to specify overrides.
+     *
+     * @example
+     * ```tsx
+     * // Disable during form submission
+     * <DialogContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     *
+     * // Restore the original filled style
+     * <DialogContent closeButtonProps={{ colorStyle: "filled" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
+    /**
+     * Fully replace the close button with a custom React node.
+     * The node is automatically wrapped in `RadixDialog.Close asChild`.
+     *
+     * When provided, `hideCloseButton` and `closeButtonProps` are ignored —
+     * this slot takes full ownership of the close action.
+     *
+     * Use when `closeButtonProps` is insufficient (e.g. completely different element
+     * or button placed inside a custom flex header).
+     *
+     * @example
+     * ```tsx
+     * <DialogContent
+     *   closeButton={
+     *     <IconButton disabled={isSubmitting} aria-label="Đóng" className="absolute right-4 top-4">
+     *       <Icon name="close" />
+     *     </IconButton>
+     *   }
+     * >
+     * ```
+     */
+    closeButton?: React$1.ReactNode;
     className?: string;
 }
 /**
@@ -62,6 +106,32 @@ interface DialogFullScreenContentProps extends React$1.ComponentPropsWithoutRef<
     actionLabel?: string;
     /** Handler invoked when pressing the primary action button. */
     onAction?: () => void;
+    /**
+     * Override any native `<button>` attribute on the top-bar action button.
+     *
+     * Common use case: `disabled` during form submission.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent
+     *   actionLabel="Lưu"
+     *   onAction={handleSave}
+     *   actionButtonProps={{ disabled: isSubmitting }}
+     * >
+     * ```
+     */
+    actionButtonProps?: React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Override any `IconButton` prop on the top-bar close button.
+     *
+     * Common use cases: `disabled` during submission, `aria-label` for i18n.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
     /** Renders a divider separating Top App Bar from scrollable body content. @default false */
     showDivider?: boolean;
     className?: string;

package/dist/{side-sheet-modal-64FGhDxL.d.mts → side-sheet-modal-kLfHINFZ.d.mts}

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React$1 from 'react';
+import { B as BaseIconButtonProps } from './icon-button-BpX9_fwZ.mjs';
 import { MotionStyle, useMotionValue, useTransform } from 'motion/react';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.mjs';
 
@@ -43,6 +44,49 @@ interface DialogProps {
 interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
     /** Hides the top-right close (X) button. @default false */
     hideCloseButton?: boolean;
+    /**
+     * Override any `IconButton` prop on the default close button.
+     *
+     * Common use cases:
+     * - `disabled` — prevent closing during form submission.
+     * - `aria-label` — i18n label (e.g. `"Đóng"`).
+     * - `colorStyle` — change visual style (`"filled"` restores original look).
+     * - `className` — reposition or override the default `absolute right-4 top-4`.
+     *
+     * These props are **merged** with the library defaults — you only need to specify overrides.
+     *
+     * @example
+     * ```tsx
+     * // Disable during form submission
+     * <DialogContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     *
+     * // Restore the original filled style
+     * <DialogContent closeButtonProps={{ colorStyle: "filled" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
+    /**
+     * Fully replace the close button with a custom React node.
+     * The node is automatically wrapped in `RadixDialog.Close asChild`.
+     *
+     * When provided, `hideCloseButton` and `closeButtonProps` are ignored —
+     * this slot takes full ownership of the close action.
+     *
+     * Use when `closeButtonProps` is insufficient (e.g. completely different element
+     * or button placed inside a custom flex header).
+     *
+     * @example
+     * ```tsx
+     * <DialogContent
+     *   closeButton={
+     *     <IconButton disabled={isSubmitting} aria-label="Đóng" className="absolute right-4 top-4">
+     *       <Icon name="close" />
+     *     </IconButton>
+     *   }
+     * >
+     * ```
+     */
+    closeButton?: React$1.ReactNode;
     className?: string;
 }
 /**
@@ -62,6 +106,32 @@ interface DialogFullScreenContentProps extends React$1.ComponentPropsWithoutRef<
     actionLabel?: string;
     /** Handler invoked when pressing the primary action button. */
     onAction?: () => void;
+    /**
+     * Override any native `<button>` attribute on the top-bar action button.
+     *
+     * Common use case: `disabled` during form submission.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent
+     *   actionLabel="Lưu"
+     *   onAction={handleSave}
+     *   actionButtonProps={{ disabled: isSubmitting }}
+     * >
+     * ```
+     */
+    actionButtonProps?: React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Override any `IconButton` prop on the top-bar close button.
+     *
+     * Common use cases: `disabled` during submission, `aria-label` for i18n.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
     /** Renders a divider separating Top App Bar from scrollable body content. @default false */
     showDivider?: boolean;
     className?: string;

package/dist/{split-button-trailing-uncheckable-CGzk7KcG.d.ts → split-button-trailing-uncheckable-BpyIlOdn.d.ts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.js';
+import { M as MD3ColorStyle, d as MD3Size, c as MD3Shape } from './md3-xBl4wgND.js';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -583,7 +583,10 @@ interface FABMenuProps {
     /** Custom CSS className for root component. */
     className?: string;
     /**
-     * When `true`, clicking backdrop overlay closes menu.
+     * When `true`, clicking or tapping anywhere outside the FABMenu container closes the menu.
+     * Implemented via document-level pointer listeners (`mousedown` and `touchstart`)
+     * without rendering a blocking full-screen overlay, preserving hover and scroll
+     * interactions on background elements.
      * @default true
      */
     closeOnBackdropClick?: boolean;
@@ -695,10 +698,12 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  * Floating Action Button expansion menu. Toggling trigger button reveals vertically stacked action items.
  *
  * Full MD3 Accessibility implementation:
+ *  - `role="group"` assigned to outer container with non-blocking click-outside detection
  *  - `role="menu"` assigned to container
  *  - `role="menuitem"` assigned to child action items
  *  - Focus lifecycle management: Open -> Focus first/last menu item; Close -> Restore focus to ToggleFAB
  *  - Keyboard navigation: Escape key closes menu, ArrowUp/Down navigates items, Tab moves focus.
+ *  - Click outside: Automatically closes the menu when clicking or tapping outside without blocking background interactions.
  *
  * @example
  * ```tsx
@@ -716,7 +721,6 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  *   aria-label="Quick actions"
  *   alignment="center"
  *   colorVariant="tertiary"
-
  *   items={items}
  * />
  * ```

package/dist/{split-button-trailing-uncheckable-gAz6OAIi.d.mts → split-button-trailing-uncheckable-CpT8iPpr.d.mts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.mjs';
+import { M as MD3ColorStyle, d as MD3Size, c as MD3Shape } from './md3-xBl4wgND.mjs';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -583,7 +583,10 @@ interface FABMenuProps {
     /** Custom CSS className for root component. */
     className?: string;
     /**
-     * When `true`, clicking backdrop overlay closes menu.
+     * When `true`, clicking or tapping anywhere outside the FABMenu container closes the menu.
+     * Implemented via document-level pointer listeners (`mousedown` and `touchstart`)
+     * without rendering a blocking full-screen overlay, preserving hover and scroll
+     * interactions on background elements.
      * @default true
      */
     closeOnBackdropClick?: boolean;
@@ -695,10 +698,12 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  * Floating Action Button expansion menu. Toggling trigger button reveals vertically stacked action items.
  *
  * Full MD3 Accessibility implementation:
+ *  - `role="group"` assigned to outer container with non-blocking click-outside detection
  *  - `role="menu"` assigned to container
  *  - `role="menuitem"` assigned to child action items
  *  - Focus lifecycle management: Open -> Focus first/last menu item; Close -> Restore focus to ToggleFAB
  *  - Keyboard navigation: Escape key closes menu, ArrowUp/Down navigates items, Tab moves focus.
+ *  - Click outside: Automatically closes the menu when clicking or tapping outside without blocking background interactions.
  *
  * @example
  * ```tsx
@@ -716,7 +721,6 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  *   aria-label="Quick actions"
  *   alignment="center"
  *   colorVariant="tertiary"
-
  *   items={items}
  * />
  * ```

package/dist/{text-field-DARNdj14.d.ts → text-field-Ct-LT_2T.d.ts}

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { M as MenuColorVariant, l as MenuVariant, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.js';
-import { b as MD3Size } from './md3-BQhRygSi.js';
+import { d as MD3Size } from './md3-xBl4wgND.js';
 
 /**
  * @file checkbox.tsx
@@ -473,11 +473,30 @@ interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defau
     /** Callback fired when selection changes */
     onChange?: (value: string, option?: SelectOption) => void;
     /**
-     * Callback fired when search query changes in searchable mode.
-     * When provided, INTERNAL filtering is disabled — pass filtered `options` from outside (for server-side/async search).
+     * Callback fired when the search query changes.
+     *
+     * ⚠️ **Requires `searchable={true}`** — without it, typing is disabled and this callback is never called.
+     *
+     * When provided, INTERNAL filtering is disabled — you control `options` externally
+     * (ideal for server-side / async search with large datasets).
+     *
+     * @example
+     * // Server-side search: fetch results as user types
+     * <Select
+     *   searchable
+     *   loading={isLoading}
+     *   options={serverResults}
+     *   onSearchChange={(query) => fetchOptions(query)}
+     *   onChange={(val) => setSelected(val)}
+     * />
      */
     onSearchChange?: (query: string) => void;
-    /** Enable autocomplete mode (input filtering real-time search) */
+    /**
+     * Enable autocomplete/search mode — renders the trigger as an editable text input.
+     *
+     * - When `false` (default): read-only dropdown, no typing allowed.
+     * - When `true`: user can type to filter options. Combine with `onSearchChange` for server-side search.
+     */
     searchable?: boolean;
     /** Whether data is loading (displays a spinner inside the dropdown) */
     loading?: boolean;

package/dist/{text-field-4OlT9o8s.d.mts → text-field-D5xiGn-q.d.mts}

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { M as MenuColorVariant, l as MenuVariant, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.mjs';
-import { b as MD3Size } from './md3-BQhRygSi.mjs';
+import { d as MD3Size } from './md3-xBl4wgND.mjs';
 
 /**
  * @file checkbox.tsx
@@ -473,11 +473,30 @@ interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defau
     /** Callback fired when selection changes */
     onChange?: (value: string, option?: SelectOption) => void;
     /**
-     * Callback fired when search query changes in searchable mode.
-     * When provided, INTERNAL filtering is disabled — pass filtered `options` from outside (for server-side/async search).
+     * Callback fired when the search query changes.
+     *
+     * ⚠️ **Requires `searchable={true}`** — without it, typing is disabled and this callback is never called.
+     *
+     * When provided, INTERNAL filtering is disabled — you control `options` externally
+     * (ideal for server-side / async search with large datasets).
+     *
+     * @example
+     * // Server-side search: fetch results as user types
+     * <Select
+     *   searchable
+     *   loading={isLoading}
+     *   options={serverResults}
+     *   onSearchChange={(query) => fetchOptions(query)}
+     *   onChange={(val) => setSelected(val)}
+     * />
      */
     onSearchChange?: (query: string) => void;
-    /** Enable autocomplete mode (input filtering real-time search) */
+    /**
+     * Enable autocomplete/search mode — renders the trigger as an editable text input.
+     *
+     * - When `false` (default): read-only dropdown, no typing allowed.
+     * - When `true`: user can type to filter options. Combine with `onSearchChange` for server-side search.
+     */
     searchable?: boolean;
     /** Whether data is loading (displays a spinner inside the dropdown) */
     loading?: boolean;

package/llms-full.txt

@@ -126,11 +126,18 @@ Icons use **Material Symbols** (Variable Font).
 ### 7.1 Compound Components & Responsive Layout Groups
 Complex components use a structured compound pattern:
 - **Dialog & Drawer**: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogBody`, `DialogFooter`, `DialogClose`.
+  - `DialogContent` has `closeButtonProps?: Partial<IconButtonProps>` to override the default close button (use `disabled`, `aria-label`, `colorStyle`, `className`) and `closeButton?: React.ReactNode` for full slot replacement (auto-wrapped in `DialogClose`).
+  - `DialogFullScreenContent` has `closeButtonProps?: Partial<IconButtonProps>` and `actionButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>` to disable/label close and action buttons during form submission.
 - **Tabs**: `Tabs`, `TabsList`, `Tab`, `TabsContent`.
 - **SplitButton**: `SplitButtonLayout`, `SplitButtonLeading`, `SplitButtonTrailing` (or `SplitButtonTrailingUncheckable`).
 - **ButtonDistribute**: `ButtonDistribute` (`mode="dynamic" | "fixed" | "mixed"`), spring-animated button layout container for responsive action bars.
 - **Menu Family**: `Menu`, `MenuTrigger`, `MenuContent`, `MenuGroup`, `MenuItem`, `MenuDivider`, `SubMenu`. Features shape morphing (`12dp` standalone corners), `variant="expressive" | "baseline"`, `colorVariant="standard" | "vibrant"`, and `matchTriggerWidth`. Includes `ContextMenu` and static `VerticalMenu`.
-- **Select**: `Select` (Exposed Dropdown Menu & Autocomplete). Wraps `TextField` + `Menu`. Supports `searchable` (real-time filtering), controlled/uncontrolled state, and `onChange={(value, option) => void}`.
+- **TextField**: Supports `filled` (default) and `outlined` variants, floating animated labels, `prefixText`/`suffixText`, `leadingIcon`, `trailingIconMode` (`"none" | "clear" | "password-toggle" | "custom"`), and `type="textarea"` with `autoResize`.
+  - **CRITICAL `onChange` Signature**: `onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void`.
+  - The 1st argument is always the extracted `value: string` (e.g. `onChange={(val) => setValue(val)}`).
+  - The 2nd argument is the native `event` (optional, for accessing event metadata).
+  - ❌ NEVER write `onChange={e => setValue(e.target.value)}` — because `e` is already the `string`, accessing `e.target` causes `TypeError: Cannot read properties of undefined (reading 'value')`.
+- **Select**: `Select` (Exposed Dropdown Menu & Autocomplete). Wraps `TextField` + `Menu`. Supports `searchable` (real-time filtering), controlled/uncontrolled state, and `onChange={(value: string, option?: SelectOption) => void}`.
 
 ### 7.2 Navigation Customization
 - **NavigationBar & NavigationRail**: Support customizable `itemShape` (`"pill" | "circle" | "rounded-rectangle"`), `labelVisibility` (`"labeled" | "auto" | "unlabeled"`), and `fabAlignment` (`"left" | "center"`).
@@ -161,6 +168,14 @@ const state = useDatePickerState({ initialSelectedDateMs: Date.now() });
 <DatePicker state={state} />
 ```
 
+### 7.5 Card Component & Morphing Border Radius
+`Card` (`@bug-on/m3-expressive/layout`) supports static (`<div>`), link (`<m.a>`), and button (`<m.button>`) modes with ripple and elevation physics.
+- **Morphing Border Radius (`morphRadius`)**: Dynamically animates `borderRadius` on hover/press using MD3 spatial spring physics (`framerSprings.fast.spatial`).
+  - `morphRadius={true}`: Default rest `large` (16px) -> hover `extraLarge` (28px).
+  - `morphRadius={{ rest: "medium", hover: "full", pressed: "small" }}`: Granular configuration with preset levels (`MorphRadiusLevel`) or raw numbers (px).
+  - Only active on interactive cards by default (`onClick`, `href`, `interactive`).
+  - Static cards can opt-in by setting `forceMotion={true}` alongside `morphRadius`.
+
 ---
 
 # PART 2: Styling & Design Tokens
@@ -247,8 +262,8 @@ import {
 | `<Button variant="toggle">` (without `selected`) | Must pass both `variant="toggle"` and `selected={boolean}` |
 | `<IconButton>` (without `aria-label`) | `aria-label` is required on icon buttons for accessibility |
 | Manually writing flex math for responsive action bars | Use `<ButtonDistribute mode="dynamic">` for spring-animated responsive width distribution |
-| `onChange={e => setValue(e.target.value)}` on TextField | `onChange={(value) => setValue(value)}` (first argument is a string) |
-| `Select` `onChange` assuming standard React `SyntheticEvent` | Signature is `onChange={(value: string, option?: SelectOption) => void}` |
+| `onChange={e => setValue(e.target.value)}` on TextField | `onChange={(value) => setValue(value)}` — 1st arg is pre-extracted `string`, 2nd arg is optional `event`. Accessing `e.target.value` throws TypeError! |
+| `Select` `onChange` assuming standard React `SyntheticEvent` | Signature is `onChange={(value: string, option?: SelectOption) => void}` (1st arg is `value: string`) |
 | `<TabsList>` (without `variant`) | `variant` prop is required on `TabsList` (`"primary"` or `"secondary"`) |
 | Using `useSnackbar()` outside `MD3ThemeProvider` or `SnackbarProvider` | Ensure provider wraps the tree with `enableSnackbar` |
 | `<DatePicker />` or `<TimePicker />` without `state` prop | Always create state via `useDatePickerState()` or `useTimePickerState()` |
@@ -257,3 +272,10 @@ import {
 | `<ProgressIndicator max={100} />` | ProgressIndicator does not support `max` prop. Progress is mapped strictly from 0 to 100 on the `value` prop |
 | `<ProgressIndicator>` without `aria-label` | `aria-label` is required on all progress indicators for accessibility |
 | `<ProgressIndicator value={0} />` for indeterminate mode | Omit `value` prop entirely (or pass `undefined`) to trigger indeterminate loading. Setting `value={0}` indicates 0% determinate progress |
+| `<DialogContent>` close button during form submission | Use `closeButtonProps={{ disabled: isSubmitting }}` — do not build a custom close button just for `disabled` support |
+| `<DialogContent>` close button i18n label | Use `closeButtonProps={{ "aria-label": "Đóng" }}` — the `aria-label` prop is forwarded to the `IconButton` |
+| `<DialogContent>` needing full custom close button | Use `closeButton={<YourNode />}` — library auto-wraps in `DialogClose asChild`. When provided, `hideCloseButton` and `closeButtonProps` are ignored |
+| `<DialogFullScreenContent>` action/close disabled during submit | Use `actionButtonProps={{ disabled: isSubmitting }}` and `closeButtonProps={{ disabled: isSubmitting }}` |
+| Building a custom header with `DialogContent` just to control close button style | Use `closeButtonProps={{ colorStyle: "standard" }}` (default) or `"filled"` to override. Only use `hideCloseButton` + custom header when layout positioning is the actual requirement |
+| Expecting `morphRadius` to animate on static `<Card>` without interaction | Static cards render a plain `<div>`. Pass `forceMotion={true}` to promote it to `<m.div>` and enable morph radius animation |
+

package/llms.txt

@@ -77,10 +77,13 @@ function Root({ children }: { children: React.ReactNode }) {
 - **Physics Springs**: Powered by `motion/react` (Framer Motion ≥12). Uses spatial (`FAST_SPATIAL_SPRING`, `DEFAULT_SPATIAL_SPRING`) and effects (`FAST_EFFECTS_SPRING`) springs.
 - **Polymorphism (`asChild`)**: Supported across buttons, cards, drawers, and dialog triggers for custom routing links.
 - **Hoisted State**: `DatePicker` and `TimePicker` are stateless and require `useDatePickerState()` / `useTimePickerState()`.
-- **TextField & Select onChange**: Parameter signature receives `(value: string)` — NOT a raw React SyntheticEvent. `Select` returns `(value: string, option?: SelectOption)`.
+- **TextField & Select onChange**: Parameter signature receives `(value: string)` as the 1st argument — NOT a raw React SyntheticEvent!
+  - `TextField`: `onChange?: (value: string, event: React.ChangeEvent<...>) => void` (write `onChange={(val) => ...}`, NEVER `e.target.value` which throws `TypeError`).
+  - `Select`: `onChange?: (value: string, option?: SelectOption) => void`.
 - **Select & Exposed Dropdowns**: `Select` supports standard dropdown and `searchable` autocomplete mode with real-time option filtering and `matchTriggerWidth` (default `true`).
 - **Menu Family & Morphing**: `Menu`, `ContextMenu`, and `VerticalMenu` feature container shape morphing (`12dp` standalone corners). `MenuContent` `matchTriggerWidth` matches popover width to trigger.
 - **ProgressIndicator & Wavy Motion**: Supports `"linear"` and `"circular"` variants with dynamic `"wavy"` shapes (`shape="wavy"`, `trackShape`, `amplitude`, `wavelength`). `aria-label` is strictly **required**. Indeterminate mode is triggered by omitting the `value` prop (do not use `max` prop). Supports co-elastic animations (`determinateAnimation`, `indeterminateAnimation`) and track stop dots (`showStopIndicator`).
+- **Card & Morphing Border Radius**: Interactive cards support spring-animated border radius morphing on hover/tap via `morphRadius` (default: `16px` rest -> `28px` hover). Static cards can opt-in using `forceMotion={true}`. Configurable via preset tokens (`"large"`, `"extraLarge"`, etc.) or custom numeric px.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",

package/dist/md3-BQhRygSi.d.mts

@@ -1,31 +0,0 @@
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
-
-/** MD3 button color variants */
-type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
-/** High-chroma tertiary tone — for hero accents, CTAs, expressive moments. */
- | "tertiary"
-/** Brand-stable primary fixed — same hue across light/dark, for badges/pills. */
- | "primary-fixed"
-/** Brand-stable tertiary fixed — same hue across light/dark, for special states. */
- | "tertiary-fixed";
-/** MD3 Expressive button sizes */
-type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * MD3 Expressive slot width ratio.
- * Used for icon buttons where width is independent from the size scale.
- * - `"narrow"` – compressed width for dense toolbars.
- * - `"default"` – 1:1 square/round aspect ratio.
- * - `"wide"` – extended width.
- */
-type MD3SlotWidth = "narrow" | "default" | "wide";
-/** MD3 shape families */
-type MD3Shape = "round" | "square";
-/** Helper: PolyMorphic component ref */
-type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
-/** Helper: Props cho polymorphic components */
-type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
-    as?: C;
-    children?: ReactNode;
-};
-
-export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c, MD3SlotWidth as d };

package/dist/md3-BQhRygSi.d.ts

@@ -1,31 +0,0 @@
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
-
-/** MD3 button color variants */
-type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
-/** High-chroma tertiary tone — for hero accents, CTAs, expressive moments. */
- | "tertiary"
-/** Brand-stable primary fixed — same hue across light/dark, for badges/pills. */
- | "primary-fixed"
-/** Brand-stable tertiary fixed — same hue across light/dark, for special states. */
- | "tertiary-fixed";
-/** MD3 Expressive button sizes */
-type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * MD3 Expressive slot width ratio.
- * Used for icon buttons where width is independent from the size scale.
- * - `"narrow"` – compressed width for dense toolbars.
- * - `"default"` – 1:1 square/round aspect ratio.
- * - `"wide"` – extended width.
- */
-type MD3SlotWidth = "narrow" | "default" | "wide";
-/** MD3 shape families */
-type MD3Shape = "round" | "square";
-/** Helper: PolyMorphic component ref */
-type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
-/** Helper: Props cho polymorphic components */
-type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
-    as?: C;
-    children?: ReactNode;
-};
-
-export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c, MD3SlotWidth as d };