@bug-on/m3-expressive 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @bug-on/m3-expressive
 
+## 1.3.3
+
+### Patch Changes
+
+- 719c20f: Add AI docs and TOC hierarchy
+
+## 1.3.2
+
+### Patch Changes
+
+- fd99c6c: Fix some minor errors.
+- Updated dependencies [fd99c6c]
+  - @bug-on/m3-tailwind@1.2.2
+  - @bug-on/m3-tokens@1.2.2
+
 ## 1.3.1
 
 ### Patch Changes

package/README.md

@@ -4,13 +4,13 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Tailwind CSS v4](https://img.shields.io/badge/Tailwind_CSS-v4-38bdf8.svg)](https://tailwindcss.com/)
 
-A high-performance, accessible React component library built strictly following the [Material Design 3 Expressive](https://m3.material.io/) design system specifications. Features fluid spring motion, flexible shape morphing, dynamic Material You color generation, SSR support, and native compatibility with Next.js 16 (App Router) and Tailwind CSS v4.
+A high-performance, accessible React component library built strictly following the [Material Design 3 Expressive](https://m3.material.io/) design system specifications. Features fluid spring physics, flexible shape morphing, dynamic Material You color generation (2025 spec), SSR support, and native compatibility with Next.js 16 (App Router / Turbopack), React 19, and Tailwind CSS v4.
 
 ---
 
 ## 📖 Documentation & Interactive Demos
 
-For detailed API references, interactive component playgrounds, and customization guides, visit:  
+For live interactive component playgrounds, code examples, and API references, visit:  
 👉 **[Official Documentation & Live Demos](https://bug-on-md3.vercel.app)**  
 👉 **[GitHub Repository](https://github.com/nguyentruongton/bug-on-md3-expressive)**
 
@@ -26,46 +26,44 @@ npm install @bug-on/m3-expressive motion
 
 ### Peer Dependencies
 
-Ensure your project includes the following peer dependencies:
-
 | Package | Version Requirement | Description |
 | :--- | :--- | :--- |
-| `react` | `>=18.0.0 || ^19.0.0` | Core React framework |
-| `react-dom` | `>=18.0.0 || ^19.0.0` | DOM renderer for React |
-| `motion` | `>=11.0.0` | Animation engine (FAB, Tabs, Dialogs, Sheets, etc.) |
-| `tailwindcss` | `>=4.0.0` | Utility CSS framework (CSS-first architecture) |
+| `react` | `^19.0.0` | React core framework |
+| `react-dom` | `^19.0.0` | React DOM renderer |
+| `motion` | `>=12.0.0` *(optional)* | Spring physics animation engine (FABs, Carousels, Tabs, Sheets) |
+| `tailwindcss` | `>=4.0.0` | Tailwind CSS v4 CSS-first framework |
 
 ---
 
 ## 🛠️ Configuration & Setup (Tailwind CSS v4)
 
 > [!WARNING]
-> This library requires **Tailwind CSS v4** (CSS-first configuration). Tailwind CSS v3 is not supported.
+> This library requires **Tailwind CSS v4** (CSS-first architecture via `@import "tailwindcss"`). Tailwind CSS v3 is not supported.
 
-Import the required stylesheets into your application's main CSS entry point (e.g. `globals.css` or `app/globals.css`):
+Import the required stylesheets into your application's root CSS entry point (e.g., `app/globals.css` or `src/index.css`):
 
 ```css
 /* 1. Core Tailwind CSS v4 */
 @import "tailwindcss";
 
-/* 2. MD3 Expressive Tokens & Theme Resets */
+/* 2. MD3 Expressive Tokens & Theme Resets (Required) */
 @import "@bug-on/m3-expressive/index.css";
 
-/* 3. (Optional) Extended MD3 Tailwind Utilities (Elevations, Transitions) */
+/* 3. (Optional) Extended MD3 Tailwind Utilities (Elevations, Transitions, Shiki) */
 @import "@bug-on/m3-tailwind";
 
-/* 4. (Optional) Expressive Typography Preset Classes */
+/* 4. (Optional) Typography Preset Classes */
 @import "@bug-on/m3-expressive/typography.css";
 ```
 
 ### Icon Font Setup (Material Symbols Outlined)
 
-The `<Icon />` component uses **Material Symbols Outlined**. You can choose CDN font delivery or self-hosted assets:
+The `<Icon />` component renders **Material Symbols Outlined** variable font glyphs:
 
 #### Option A: Google Fonts CDN (Recommended for Web)
 
 ```tsx
-// app/layout.tsx or src/main.tsx
+// app/layout.tsx
 import "@bug-on/m3-expressive/material-symbols-cdn.css";
 import { MaterialSymbolsPreconnect } from "@bug-on/m3-expressive";
 
@@ -83,7 +81,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 #### Option B: Offline / Self-Hosted Assets
 
-For air-gapped environments or offline font delivery, install `@bug-on/m3-fonts`:
+For air-gapped networks, enterprise privacy, or offline PWAs, install `@bug-on/m3-fonts`:
 
 ```bash
 pnpm add @bug-on/m3-fonts
@@ -98,19 +96,19 @@ pnpm add @bug-on/m3-fonts
 
 ## 🧩 Subpath Exports Guide
 
-To keep bundle sizes lean, `@bug-on/m3-expressive` offers dedicated subpath entrypoints:
+Optimize your bundle size and tree-shaking by importing directly from modular subpaths:
 
 | Subpath Import | Module Contents |
 | :--- | :--- |
-| `@bug-on/m3-expressive/core` | `MD3ThemeProvider`, `createMd3ExpressiveTheme`, `generateM3Theme`, `applyTheme` |
+| `@bug-on/m3-expressive/core` | `MD3ThemeProvider`, `createMd3ExpressiveTheme`, `generateM3Theme`, `applyTheme`, `useTheme`, `useThemeMode`, `Icon`, `Ripple`, `MaterialSymbolsPreconnect`, `cn` |
 | `@bug-on/m3-expressive/buttons` | `Button`, `IconButton`, `FAB`, `ExtendedFAB`, `FABMenu`, `SplitButton`, `ButtonGroup`, `ButtonDistribute` |
-| `@bug-on/m3-expressive/forms` | `TextField`, `Checkbox`, `RadioButton`, `Switch`, `Slider`, `RangeSlider`, `Select`, `Search` |
-| `@bug-on/m3-expressive/navigation` | `NavigationBar`, `NavigationRail`, `NavigationDrawer`, `Tabs`, `Tab`, `TabsList`, `TabsContent`, `App Bar`, `Toolbar` |
-| `@bug-on/m3-expressive/overlays` | `Dialog`, `SideSheet`, `BottomSheet`, `Tooltip` |
-| `@bug-on/m3-expressive/feedback` | `Snackbar`, `SnackbarProvider`, `useSnackbar`, `ProgressIndicator`, `LoadingIndicator`, `Badge`, `BadgedBox` |
-| `@bug-on/m3-expressive/layout` | `Card`, `Divider`, `List`, `ListItem`, `ListDivider`, `ScrollArea`, `CodeBlock`, `TableOfContents` |
-| `@bug-on/m3-expressive/pickers` | `DatePicker`, `TimePicker` |
-| `@bug-on/m3-expressive/shapes` | `ShapeMedia`, `ShapeEngine`, `MD3Shape` utilities |
+| `@bug-on/m3-expressive/forms` | `TextField`, `Checkbox`, `TriStateCheckbox`, `RadioButton`, `RadioGroup`, `Switch`, `Slider`, `RangeSlider`, `Select`, `Chip`, `Search` |
+| `@bug-on/m3-expressive/navigation` | `NavigationBar`, `NavigationRail`, `NavigationDrawer`, `Tabs`, `Tab`, `TabsList`, `TabsContent`, `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/feedback` | `Snackbar`, `SnackbarProvider`, `useSnackbar`, `ProgressIndicator` (linear, circular, wavy), `LoadingIndicator`, `Badge`, `BadgedBox`, `PlainTooltip`, `RichTooltip` |
+| `@bug-on/m3-expressive/layout` | `Card`, `Carousel` (Morphing layout, Multi-browse, Uncontained), `Divider`, `List`, `ListItem`, `ListDivider`, `ScrollArea`, `CodeBlock`, `TableOfContents`, `Text`, `Typography` |
+| `@bug-on/m3-expressive/pickers` | `DatePicker`, `DatePickerDialog`, `DatePickerInput`, `DateRangePicker`, `TimePicker`, `TimePickerDialog`, `TimeInput`, `useDatePickerState`, `useDateRangePickerState`, `useTimePickerState` |
+| `@bug-on/m3-expressive/shapes` | `ShapeMedia`, `ShapeSvg`, `ShapeIcon`, `useShapeMorph`, MD3 shape morphing engine |
 
 ---
 
@@ -119,10 +117,10 @@ To keep bundle sizes lean, `@bug-on/m3-expressive` offers dedicated subpath entr
 ```tsx
 import { MD3ThemeProvider } from "@bug-on/m3-expressive/core";
 import { Button } from "@bug-on/m3-expressive/buttons";
-import { TextField } from "@bug-on/m3-expressive/forms";
+import { TextField, Chip } from "@bug-on/m3-expressive/forms";
 import { Icon } from "@bug-on/m3-expressive";
 
-export default function LoginCard() {
+export default function App() {
   return (
     <MD3ThemeProvider sourceColor="#00639b" defaultMode="system">
       <div className="p-6 bg-m3-surface text-m3-on-surface rounded-m3-extra-large shadow-m3-elevation-2 max-w-sm space-y-4">
@@ -134,6 +132,10 @@ export default function LoginCard() {
           leadingIcon={<Icon name="mail" />}
         />
         
+        <div className="flex gap-2">
+          <Chip variant="filter" selected label="Remember me" />
+        </div>
+        
         <Button
           colorStyle="filled"
           size="md"
@@ -152,48 +154,99 @@ export default function LoginCard() {
 ## 🎨 Component Inventory
 
 ### 🔘 Buttons & Actions
-- **`Button`**: Filled, Elevated, Tonal, Outlined, Text variants.
+- **`Button`**: Filled, Elevated, Tonal, Outlined, Text, Tertiary, Primary-Fixed, and Tertiary-Fixed color styles.
 - **`IconButton`**: Standard, Filled, Tonal, Outlined, with toggle state support.
-- **`FAB` / `ExtendedFAB`**: Small, Medium, Large, Extended with label & animated icons.
-- **`FABMenu`**: Speed-dial style Floating Action Button expandable menu.
-- **`SplitButton`**: Combined primary button action with dropdown trigger.
-- **`ButtonGroup` / `ButtonDistribute`**: Grouped segmented buttons with shared shape states.
+- **`FAB` / `ExtendedFAB`**: Small, Medium, Large, Extended with icon motion and responsive collapsing.
+- **`FABMenu`**: Speed-dial expandable Floating Action Button menu with spring transition physics.
+- **`SplitButton`**: Combined primary button action with trailing menu dropdown.
+- **`ButtonGroup` / `ButtonDistribute`**: Segmented button groups with shared morphing shapes and dynamic width distribution.
+
+### 🏷️ Chips
+- **`Chip`**: Assist, Filter, Input, and Suggestion chip variants.
+- **`ChipGroup`**: Horizontally scrollable and wrapping chip containers.
+- **Features**: Leading avatars/icons, animated selection checkmarks, and trailing remove/action icons.
 
 ### 📝 Forms & Inputs
-- **`TextField`**: Outlined and Filled variants with leading/trailing icons, error state, and helper text.
-- **`Checkbox`**: Standard and TriState indeterminate checkbox with animated checkmark.
-- **`RadioButton`**: Standard Material Design 3 single select options.
-- **`Switch`**: Toggle switch with optional inline icons.
+- **`TextField`**: Outlined and Filled text inputs with floating labels, character count, error helper text, and icon slots.
+- **`Checkbox` / `TriStateCheckbox`**: Standard and indeterminate checkboxes with animated checkmarks.
+- **`RadioButton` / `RadioGroup`**: Single-selection groups with smooth scale transitions.
+- **`Switch`**: Expressive toggle switch with optional custom inline icons.
 - **`Slider` / `RangeSlider`**: Continuous and discrete sliders with value tooltips and step indicators.
-- **`Select` / `Menu`**: Expressive dropdown select and popover menus.
-- **`Search`**: Search bar and full-screen Search View overlays.
+- **`Select`**: Exposed dropdown menu and autocomplete search select (`searchable`, `matchTriggerWidth`).
+- **`Search` / `SearchBar` / `SearchView`**: Search input bars and full-screen docked/expanded search surfaces.
+
+### 📅 Date & Time Pickers
+- **`DatePicker` / `DatePickerDialog` / `DatePickerInput`**: Modal and inline calendar date pickers with hoisted `useDatePickerState()`.
+- **`DateRangePicker`**: Range selection date picker with `useDateRangePickerState()`.
+- **`TimePicker` / `TimePickerDialog` / `TimeInput`**: Dial clock face and numeric time inputs with `useTimePickerState()`.
 
 ### 🧭 Navigation & Toolbars
-- **`NavigationBar`**: Bottom navigation bar with animated active indicators.
-- **`NavigationRail`**: Vertical navigation bar for wide displays and desktop screens.
-- **`NavigationDrawer`**: Standard docked and modal drawer components.
-- **`Tabs` / `Tab` / `TabsList` / `TabsContent`**: Primary and Secondary tabs with sliding indicator.
-- **`SmallAppBar` / `MediumFlexibleAppBar` / `LargeFlexibleAppBar` / `BottomAppBar`**: Collapsible & flexible app bars.
-- **`DockedToolbar`**: Expressive floating/docked action toolbar.
-
-### 🖼️ Overlays & Feedback
-- **`Dialog`**: Expressive alert and full-screen dialogs powered by Framer Motion.
-- **`SideSheet` / `BottomSheet`**: Modal and non-modal contextual sheets.
-- **`Tooltip`**: Plain and Rich tooltips with carets and call-to-action buttons.
-- **`Snackbar` / `SnackbarProvider` / `useSnackbar`**: Toast notification queue system.
-- **`ProgressIndicator`**: Circular and Linear progress bars (determinate, indeterminate, wavy).
-- **`LoadingIndicator`**: Expressive loading animation.
-- **`Badge` / `BadgedBox`**: Dot and numerical status badges.
-
-### 📐 Layout, Surfaces & Shapes
-- **`Card`**: Elevated, Filled, Outlined card surfaces.
-- **`Divider`**: Full-bleed and inset divider lines.
-- **`List` / `ListItem` / `ListDivider`**: Single and multi-line list items with avatar/icon slots.
-- **`ScrollArea`**: Styled scrollable container.
-- **`ShapeMedia`**: Morphing media frame supporting MD3 expressive shapes (Full, Extra Large, Large, Medium, Small).
+- **`NavigationBar`**: Bottom navigation bar with animated pill active indicator and label visibility controls.
+- **`NavigationRail`**: Vertical navigation bar for tablets and desktop viewports.
+- **`NavigationDrawer` / `Drawer`**: Standard docked and modal side navigation drawers.
+- **`Tabs` / `Tab` / `TabsList` / `TabsContent`**: Primary and Secondary tabs with sliding underline indicator.
+- **`SmallAppBar` / `MediumFlexibleAppBar` / `LargeFlexibleAppBar` / `BottomAppBar`**: Collapsible header app bars with scroll behavior binding (`useAppBarScroll`).
+- **`DockedToolbar` / `HorizontalFloatingToolbar` / `VerticalFloatingToolbar`**: Floating and docked adaptive toolbars with optional embedded FAB.
+
+### 📜 Menus
+- **`Menu`**: Popup menus with cascading submenu support and trigger width matching.
+- **`ContextMenu`**: Right-click contextual popover menu.
+- **`VerticalMenu`**: Always-visible static vertical navigation menu with container shape morphing.
+
+### 🖼️ Overlays & Sheets
+- **`Dialog` / `DialogFullScreenContent`**: Expressive modal dialogs, alert confirmations, and full-screen dialogs.
+- **`BottomSheet` / `BottomSheetModal`**: Draggable bottom sheets with snap points and drag gestures (`useBottomSheet`).
+- **`SideSheet` / `SideSheetModal`**: Contextual docked and modal side panels.
+
+### ⚡ Feedback & Status
+- **`Snackbar` / `SnackbarProvider` / `useSnackbar`**: Imperative queue toast notification system with action triggers.
+- **`ProgressIndicator`**: Linear and circular progress indicators (determinate, indeterminate, wavy shape `shape="wavy"`, and track stop dots).
+- **`LoadingIndicator`**: Expressive indeterminate loading animations.
+- **`Badge` / `BadgedBox`**: Small status dots and numerical count notification badges.
+- **`PlainTooltip` / `RichTooltip`**: Informative plain tooltips and rich interactive popover tooltips with carets and actions.
+
+### 📐 Layout, Surfaces & Carousel
+- **`Carousel`**: MD3 Expressive morphing carousel supporting Multi-browse, Uncontained, and Hero layouts (`useCarouselKeylines`, `useCarouselA11y`).
+- **`Card`**: Elevated, Filled, and Outlined surface cards with header, media, content, and footer slots.
+- **`Divider`**: Full-bleed, inset, and decorative wavy dividers (`buildWavePath`).
+- **`List` / `ListItem` / `ListDivider`**: Single and multi-line list rows with avatar, checkbox, and action controls.
+- **`ScrollArea`**: Lightweight customized scrollable container.
+- **`CodeBlock`**: Syntax-highlighted code container with copy button.
+- **`TableOfContents`**: Interactive documentation navigation anchor list.
+- **`Text` / `Typography`**: Expressive typography renderers with standard MD3 type scales.
+
+### 🔮 Shapes & Motion Engine
+- **`ShapeMedia` / `ShapeSvg` / `ShapeIcon`**: Morphing media frames supporting MD3 expressive geometry (Full, Extra Large, Large, Medium, Small, Star, Clover, Arch, etc.).
+- **`useShapeMorph`**: Dynamic spring-based corner shape interpolation hook.
+
+---
+
+## 🤖 AI Agent Integration
+
+This package ships with machine-readable LLM documentation (`llms.txt` and `llms-full.txt`) adhering to the [llmstxt.org](https://llmstxt.org/) standard. When installed in your project, AI coding assistants (Cursor, GitHub Copilot, Claude Code, ChatGPT Codex) can read the bundled specification directly to understand APIs and avoid hallucinating props.
+
+### 📚 Locating LLM Documentation
+
+- **Local (in your project after install)**:
+  - `node_modules/@bug-on/m3-expressive/llms-full.txt` *(Full API & Gotchas reference - Recommended)*
+  - `node_modules/@bug-on/m3-expressive/llms.txt` *(Quick overview)*
+- **Remote CDN**:
+  - `https://unpkg.com/@bug-on/m3-expressive/llms-full.txt`
+  - `https://cdn.jsdelivr.net/npm/@bug-on/m3-expressive/llms-full.txt`
+  - `https://raw.githubusercontent.com/nguyentruongton/bug-on-md3-expressive/main/llms-full.txt`
+
+### 💡 Suggested Prompt for your AI Assistant
+Add this instruction to your project's `CLAUDE.md`, `.cursorrules`, or system prompt:
+
+```markdown
+Before generating or modifying UI components using @bug-on/m3-expressive, read:
+- Local: node_modules/@bug-on/m3-expressive/llms-full.txt
+- CDN: https://unpkg.com/@bug-on/m3-expressive/llms-full.txt
+```
 
 ---
 
 ## ⚖️ License
 
 [MIT](./LICENSE)
+

package/dist/buttons.d.mts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CIVEYgjY.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-gAz6OAIi.mjs';
 import { Transition } from 'motion/react';
-import { c as MD3Size } from './md3-D0_Z7IXj.mjs';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-USJo7AqO.mjs';
+import { b as MD3Size } from './md3-BQhRygSi.mjs';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CxyJv7UV.mjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/buttons.d.ts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DTQJjzsB.js';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CGzk7KcG.js';
 import { Transition } from 'motion/react';
-import { c as MD3Size } from './md3-D0_Z7IXj.js';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CqdQBsRe.js';
+import { b as MD3Size } from './md3-BQhRygSi.js';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-Di8VX6ou.js';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/{core-CAU8g2HY.d.mts → core-D8FdHY6I.d.mts}

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
-import './md3-D0_Z7IXj.mjs';
+import './md3-BQhRygSi.mjs';
 import { a as Typography, F as FontVariationAxes } from './typography-339RV6v7.mjs';
 
 /**

package/dist/{core-DRrLnsnJ.d.ts → core-DyEy8H9Z.d.ts}

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
-import './md3-D0_Z7IXj.js';
+import './md3-BQhRygSi.js';
 import { a as Typography, F as FontVariationAxes } from './typography-339RV6v7.js';
 
 /**

package/dist/core.d.mts

@@ -1,5 +1,5 @@
-export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-CAU8g2HY.mjs';
-export { a as MD3ColorStyle, b as MD3Shape, c as MD3Size, P as PolymorphicProps, d as PolymorphicRef } from './md3-D0_Z7IXj.mjs';
+export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-D8FdHY6I.mjs';
+export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-BQhRygSi.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'clsx';

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-DRrLnsnJ.js';
-export { a as MD3ColorStyle, b as MD3Shape, c as MD3Size, P as PolymorphicProps, d as PolymorphicRef } from './md3-D0_Z7IXj.js';
+export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-DyEy8H9Z.js';
+export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-BQhRygSi.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'clsx';

package/dist/core.js

@@ -2150,11 +2150,13 @@ var Snackbar = React4__namespace.memo(function Snackbar2({
                   type: "button",
                   onClick: handleAction,
                   className: cn(
-                    "text-sm font-medium",
-                    "px-2 py-1 rounded-sm",
-                    "focus-visible:outline-none focus-visible:ring-2",
-                    "transition-colors whitespace-nowrap",
-                    "text-m3-inverse-primary"
+                    "inline-flex items-center justify-center",
+                    "h-10 px-3 py-2.5 rounded-sm",
+                    "text-sm font-medium leading-5 whitespace-nowrap",
+                    "text-m3-inverse-primary",
+                    "hover:bg-m3-inverse-primary/8 focus-visible:bg-m3-inverse-primary/12 active:bg-m3-inverse-primary/12",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-inverse-primary",
+                    "transition-colors select-none cursor-pointer"
                   ),
                   children: actionLabel
                 }
@@ -2163,10 +2165,10 @@ var Snackbar = React4__namespace.memo(function Snackbar2({
                 IconButton,
                 {
                   size: "sm",
-                  colorStyle: "filled",
+                  colorStyle: "standard",
                   "aria-label": "Dismiss notification",
                   onClick: handleDismiss,
-                  className: "text-m3-inverse-on-surface bg-m3-inverse-surface",
+                  className: "text-m3-inverse-on-surface hover:bg-m3-inverse-on-surface/8 active:bg-m3-inverse-on-surface/12 focus-visible:ring-m3-inverse-primary",
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", "aria-hidden": "true" })
                 }
               )