@bug-on/m3-expressive 1.3.4 → 1.3.6

package/dist/{side-sheet-modal-64FGhDxL.d.mts → side-sheet-modal-BycxrabB.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-CxyJv7UV.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/{side-sheet-modal-Bd5Qqvp9.d.ts → side-sheet-modal-Cw4vemKx.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-Di8VX6ou.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/{text-field-4OlT9o8s.d.mts → text-field-B1fLh5Sh.d.mts}

@@ -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-DARNdj14.d.ts → text-field-C0VQLp8Y.d.ts}

@@ -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/{typography-339RV6v7.d.mts → typography-CKTjvlZ4.d.mts}

@@ -97,14 +97,39 @@ interface FontVariationAxes {
     ROND?: number;
     /**
      * Weight axis. Overrides `font-weight` via variation settings.
+     * Range: `100` (thin) – `1000` (extra black).
      * @default font default
      */
     wght?: number;
     /**
      * Width axis. Controls glyph condensation/expansion.
+     * Range: `75` (condensed) – `125` (expanded).
      * @default font default
      */
     wdth?: number;
+    /**
+     * Optical Size axis. Adjusts stroke thickness, proportions, and spacing
+     * for optimal readability at different text sizes.
+     * Range: `6` (caption/fine print) – `144` (display/banner).
+     *
+     * Note: Browsers normally handle optical sizing automatically via `font-optical-sizing: auto`.
+     * When manually overriding `opsz` in CSS, set `font-optical-sizing: none` to prevent conflicts.
+     * @default font default
+     */
+    opsz?: number;
+    /**
+     * Grade axis. Modifies stroke weight/density without changing layout, line wrapping, or glyph advance widths.
+     * Ideal for dark mode adjustments or subtle hover/emphasis states.
+     * Range: `-200` (light grade) – `150` (heavy grade).
+     * @default 0
+     */
+    GRAD?: number;
+    /**
+     * Slant axis. Applies font-designed slant angle in degrees.
+     * Range: `-15` (15-degree forward slant) – `0` (upright).
+     * @default 0
+     */
+    slnt?: number;
     /** Any additional named variation axis supported by the font. */
     [axis: string]: number | undefined;
 }

package/dist/{typography-339RV6v7.d.ts → typography-CKTjvlZ4.d.ts}

@@ -97,14 +97,39 @@ interface FontVariationAxes {
     ROND?: number;
     /**
      * Weight axis. Overrides `font-weight` via variation settings.
+     * Range: `100` (thin) – `1000` (extra black).
      * @default font default
      */
     wght?: number;
     /**
      * Width axis. Controls glyph condensation/expansion.
+     * Range: `75` (condensed) – `125` (expanded).
      * @default font default
      */
     wdth?: number;
+    /**
+     * Optical Size axis. Adjusts stroke thickness, proportions, and spacing
+     * for optimal readability at different text sizes.
+     * Range: `6` (caption/fine print) – `144` (display/banner).
+     *
+     * Note: Browsers normally handle optical sizing automatically via `font-optical-sizing: auto`.
+     * When manually overriding `opsz` in CSS, set `font-optical-sizing: none` to prevent conflicts.
+     * @default font default
+     */
+    opsz?: number;
+    /**
+     * Grade axis. Modifies stroke weight/density without changing layout, line wrapping, or glyph advance widths.
+     * Ideal for dark mode adjustments or subtle hover/emphasis states.
+     * Range: `-200` (light grade) – `150` (heavy grade).
+     * @default 0
+     */
+    GRAD?: number;
+    /**
+     * Slant axis. Applies font-designed slant angle in degrees.
+     * Range: `-15` (15-degree forward slant) – `0` (upright).
+     * @default 0
+     */
+    slnt?: number;
     /** Any additional named variation axis supported by the font. */
     [axis: string]: number | undefined;
 }

package/dist/typography.css

@@ -5,7 +5,7 @@
 	src: url('./assets/fonts/GoogleSansFlex-VariableFont.woff2')
 		format("woff2");
 	font-weight: 100 1000;
-	font-style: normal;
+	font-style: oblique -15deg 0deg;
 	font-display: swap;
 }
 

package/llms-full.txt

@@ -1,6 +1,6 @@
-# @bug-on/m3-expressive — Full AI Documentation (v1.1.1)
+# @bug-on/m3-expressive — Full AI Documentation & API Specification (Latest Stable Release)
 
-This file contains the complete context for the `@bug-on/m3-expressive` library (version 1.1.1), including core principles, multi-package architecture, styling guides, component references, and AI gotchas.
+This document provides complete, canonical context for the `@bug-on/m3-expressive` ecosystem (React 19 + Tailwind CSS v4 + Motion for React), including core principles, multi-package architecture, styling guides, component references, subpath exports, and AI gotchas.
 
 ---
 
@@ -113,7 +113,10 @@ Icons use **Material Symbols** (Variable Font).
 <Icon name="search" weight={500} size={24} />
 ```
 
-- Standard CDN imports: `@import "@bug-on/m3-expressive/typography.css";` and `@import "@bug-on/m3-expressive/material-symbols-cdn.css";`
+- Standard CDN setup:
+  - Base styles: `@import "@bug-on/m3-expressive/material-symbols-cdn.css";` and `@import "@bug-on/m3-expressive/typography.css";` in root CSS.
+  - React + Vite: Add `<link rel="preconnect" ...>` and `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />` to `index.html` inside `<head>`.
+  - Next.js (App Router): Add `<MaterialSymbolsPreconnect variants={["rounded"]} display="block" />` in `app/layout.tsx` inside `<head>`.
 - Offline / Self-hosted imports: `pnpm add @bug-on/m3-fonts`, then `@import "@bug-on/m3-fonts/typography.css";` and `@import "@bug-on/m3-fonts/material-symbols.css";`
 
 ---
@@ -123,6 +126,8 @@ 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.
@@ -222,16 +227,17 @@ import {
 
 ## Subpath Exports Map
 
-- `@bug-on/m3-expressive` — complete package exports
-- `@bug-on/m3-expressive/index.css` — **REQUIRED**: bundled tokens + Tailwind `@theme` + resets
-- `@bug-on/m3-expressive/core` — base providers, hooks, motion tokens
-- `@bug-on/m3-expressive/buttons` — Button, IconButton, ButtonDistribute, FAB, ExtendedFAB, FABMenu, SplitButton, ButtonGroup
-- `@bug-on/m3-expressive/forms` — Select, TextField, Checkbox, RadioButton, Switch, Slider, Search
-- `@bug-on/m3-expressive/feedback` — Dialog, Menu, ContextMenu, VerticalMenu, Tooltip, SnackbarProvider, ProgressIndicator
-- `@bug-on/m3-expressive/navigation` — NavigationBar, NavigationRail, Drawer, Tabs
-- `@bug-on/m3-expressive/overlays` — BottomSheet, SideSheet
-- `@bug-on/m3-expressive/pickers` — DatePicker, DateRangePicker, TimePicker, state hooks
-- `@bug-on/m3-expressive/shapes` — ShapeMedia, ShapeSvg
+- `@bug-on/m3-expressive` — Complete package root exports
+- `@bug-on/m3-expressive/index.css` — **REQUIRED**: Bundled tokens + Tailwind v4 `@theme` + resets
+- `@bug-on/m3-expressive/core` — Base providers (`MD3ThemeProvider`), theme utilities (`createMd3ExpressiveTheme`, `generateM3Theme`, `applyTheme`, `resolveMode`), hooks (`useMediaQuery`, `useDOMRipple`, `useTheme`, `useThemeMode`, `useSnackbar`), `Icon`, `Ripple`, `MaterialSymbolsPreconnect`
+- `@bug-on/m3-expressive/buttons` — `Button`, `IconButton`, `ButtonDistribute`, `FAB`, `ExtendedFAB`, `FABMenu`, `SplitButton`, `ButtonGroup`
+- `@bug-on/m3-expressive/forms` — `TextField`, `Select`, `Chip`, `Checkbox`, `TriStateCheckbox`, `RadioButton`, `RadioGroup`, `Switch`, `Slider`, `RangeSlider`
+- `@bug-on/m3-expressive/navigation` — `NavigationBar`, `NavigationBarItem`, `NavigationRail`, `NavigationRailItem`, `NavigationDrawer`, `Tabs`, `Tab`, `TabsList`, `TabsContent`, `SmallAppBar`, `MediumFlexibleAppBar`, `LargeFlexibleAppBar`, `BottomAppBar`, `DockedToolbar`, `HorizontalFloatingToolbar`, `VerticalFloatingToolbar`, `ToolbarIconButton`, `ToolbarToggleButton`, `Menu`, `ContextMenu`, `VerticalMenu`, `Search`, `SearchBar`, `SearchView`
+- `@bug-on/m3-expressive/overlays` — `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogBody`, `DialogFooter`, `DialogClose`, `DialogFullScreenContent`, `Drawer`, `BottomSheet`, `BottomSheetModal`, `SideSheet`, `SideSheetModal`
+- `@bug-on/m3-expressive/feedback` — `Badge`, `BadgedBox`, `LoadingIndicator`, `ProgressIndicator`, `Snackbar`, `SnackbarProvider`, `useSnackbar`, `PlainTooltip`, `RichTooltip`
+- `@bug-on/m3-expressive/layout` — `Card`, `Carousel`, `Divider`, `List`, `ListItem`, `ListDivider`, `ScrollArea`, `CodeBlock`, `TableOfContents`, `Text`, `Typography`, `FadingBlurMask`
+- `@bug-on/m3-expressive/pickers` — `DatePicker`, `DatePickerDialog`, `DatePickerInput`, `DateRangePicker`, `TimePicker`, `TimePickerDialog`, `TimeInput`, `useDatePickerState`, `useDateRangePickerState`, `useTimePickerState`
+- `@bug-on/m3-expressive/shapes` — `ShapeMedia`, `ShapeSvg`, `ShapeIcon`, `useShapeMorph`
 
 ---
 
@@ -253,3 +259,8 @@ 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 |

package/llms.txt

@@ -1,6 +1,6 @@
 # @bug-on/m3-expressive
 
-> MD3 Expressive Design System for React + Tailwind v4 + Framer Motion. Version: 1.3.1
+> MD3 Expressive Design System for React 19 + Tailwind CSS v4 + Motion for React (Current Stable Release).
 
 > [!WARNING]
 > Bug On MD3 Expressive only supports **Tailwind CSS v4** (peer dependency `tailwindcss: ">=4.0.0"`). **Tailwind CSS v3 is no longer supported**.
@@ -23,14 +23,19 @@ pnpm add @bug-on/m3-expressive motion
 ```
 
 ```css
-/* globals.css — Zero Config Tailwind v4 setup */
+/* globals.css / index.css — Zero Config Tailwind v4 setup */
 @import "tailwindcss";
 @import "@bug-on/m3-expressive/index.css";         /* tokens + @theme + resets (REQUIRED) */
 @import "@bug-on/m3-tailwind";                     /* optional: MD3 utilities & elevation */
 @import "@bug-on/m3-expressive/typography.css";    /* optional: typography preset classes */
-@import "@bug-on/m3-expressive/material-symbols-cdn.css"; /* optional: Material Symbols (CDN) */
+@import "@bug-on/m3-expressive/material-symbols-cdn.css"; /* base styles for .md-icon */
 ```
 
+Material Symbols CDN Font Loading:
+- **React + Vite**: Add font link tags to `index.html` inside `<head>` (use `display=block` to prevent ligature text flashing):
+  `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />`
+- **Next.js (App Router)**: Add `<MaterialSymbolsPreconnect variants={["rounded"]} display="block" />` in `app/layout.tsx` inside `<head>`.
+
 For offline or self-hosted fonts:
 ```bash
 pnpm add @bug-on/m3-fonts
@@ -83,13 +88,13 @@ function Root({ children }: { children: React.ReactNode }) {
 
 - `@bug-on/m3-expressive` — complete package exports
 - `@bug-on/m3-expressive/index.css` — **REQUIRED**: bundled tokens + Tailwind `@theme` + resets
-- `@bug-on/m3-expressive/core` — base providers (`MD3ThemeProvider`), hooks (`useTheme`, `useThemeMode`, `useSnackbar`), `Icon`, `Ripple`
+- `@bug-on/m3-expressive/core` — base providers (`MD3ThemeProvider`), theme utilities (`createMd3ExpressiveTheme`, `generateM3Theme`, `applyTheme`, `resolveMode`), hooks (`useTheme`, `useThemeMode`, `useSnackbar`, `useMediaQuery`, `useDOMRipple`), `Icon`, `Ripple`, `MaterialSymbolsPreconnect`
 - `@bug-on/m3-expressive/buttons` — Button, IconButton, ButtonDistribute, FAB, ExtendedFAB, FABMenu, SplitButton, ButtonGroup
-- `@bug-on/m3-expressive/forms` — TextField, Chip, Checkbox, TriStateCheckbox, RadioButton, RadioGroup, Switch, Slider, RangeSlider, Select, Search
+- `@bug-on/m3-expressive/forms` — TextField, Chip, Checkbox, TriStateCheckbox, RadioButton, RadioGroup, Switch, Slider, RangeSlider, Select
 - `@bug-on/m3-expressive/feedback` — Snackbar, SnackbarProvider, useSnackbar, ProgressIndicator (linear, circular, wavy), LoadingIndicator, Badge, BadgedBox, PlainTooltip, RichTooltip
 - `@bug-on/m3-expressive/navigation` — NavigationBar, NavigationRail, NavigationDrawer, Tabs, Tab, SmallAppBar, MediumFlexibleAppBar, LargeFlexibleAppBar, BottomAppBar, DockedToolbar, HorizontalFloatingToolbar, VerticalFloatingToolbar, Menu, ContextMenu, VerticalMenu, Search
 - `@bug-on/m3-expressive/overlays` — Dialog, DialogFullScreenContent, Drawer, BottomSheet, BottomSheetModal, SideSheet, SideSheetModal
-- `@bug-on/m3-expressive/layout` — Card, Carousel, Divider, List, ListItem, ListDivider, ScrollArea, CodeBlock, TableOfContents, Text, Typography
+- `@bug-on/m3-expressive/layout` — Card, Carousel, Divider, List, ListItem, ListDivider, ScrollArea, CodeBlock, TableOfContents, Text, Typography, FadingBlurMask
 - `@bug-on/m3-expressive/pickers` — DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, TimePicker, TimePickerDialog, TimeInput, state hooks
 - `@bug-on/m3-expressive/shapes` — ShapeMedia, ShapeSvg, ShapeIcon, useShapeMorph
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",
@@ -183,8 +183,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0",
-    "@bug-on/m3-tokens": "1.2.2",
-    "@bug-on/m3-tailwind": "1.2.2"
+    "@bug-on/m3-tailwind": "1.2.3",
+    "@bug-on/m3-tokens": "1.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",