@bug-on/m3-expressive 1.0.0 → 1.2.0

package/dist/index.css

@@ -1,8 +1,13 @@
 /* @bug-on/m3-tokens — MD3 System Color Tokens */
-/* MD3 System Color Tokens — Light Theme (Baseline Scheme)
+/* MD3 Expressive System Color Tokens — Light Theme (Baseline Scheme)
  *
+ * Spec: Material 3 Expressive 2025 (SpecVersion '2025')
  * Mapping: PaletteTokens → ColorLightTokens → CSS variable
  * Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
+ *
+ * Static fallback for SSR / no-JS environments.
+ * At runtime, MD3ThemeProvider overrides all --md-sys-color-* via
+ * element.style.setProperty() using the dynamic color engine (theme-utils.ts).
  */
 :root {
 	/* ── Primary ─────────────────────────────────────────────────────────── */
@@ -299,6 +304,9 @@ input::-ms-reveal {
   --radius-m3-xxl: var(--md-sys-shape-corner-extra-extra-large, 48px);
   --radius-m3-full: var(--md-sys-shape-corner-full, 9999px);
 
+  /* ── Typography Scale & Family ── */
+  --font-md3-expressive: "Google Sans Flex", system-ui, sans-serif;
+
   /* ── Motion Easing ── */
   --ease-m3-emphasized: cubic-bezier(0.2, 0, 0, 1);
   --ease-m3-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

package/dist/index.d.mts

@@ -1,14 +1,15 @@
-export { Icon, IconProps, MD3ColorScheme, MD3ThemeProvider, MD3ThemeProviderProps, MaterialSymbolsPreconnect, Ripple, RippleOrigin, RippleProps, ThemeMode, UseRippleStateOptions, applyTheme, cn, generateM3Theme, resolveMode, useDOMRipple, useMediaQuery, useRipple, useRippleState, useTheme, useThemeMode } from './core.mjs';
+import { S as SchemeVariant, C as ContrastLevel, M as MD3ColorScheme } from './core-D4048_K5.mjs';
+export { G as GenerateM3ThemeOptions, I as Icon, a as IconProps, 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-D4048_K5.mjs';
 export { ANGLE_EPSILON, CornerFeature, CornerRounding, Cubic, CubicPair, DISTANCE_EPSILON, DoubleMapper, EdgeFeature, FLOAT_PI, Feature, MD3CornerRadius, MD3CornerRadiusToken, MD3ShapeName, MD3Shapes, MeasuredCubic, MeasuredFeature, MeasuredPolygon, Morph, MorphTrigger, MutableCubic, Point, PointTransformer, RoundedPolygon, ShapeIcon, ShapeIconProps, ShapeMedia, ShapeMediaProps, ShapeMediaServer, ShapeMorphOptions, ShapeRef, ShapeSvg, ShapeSvgProps, UNROUNDED, UseShapeMorphResult, addPoints, circle, clockwise, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, getDirection, getDistance, getDistanceSquared, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, rotate90, scalePoint, square, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useShapeMorph } from './shapes.mjs';
-export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-DFhj-NZj.mjs';
+export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.mjs';
 export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColors, AppBarColumn, AppBarColumnProps, AppBarItem, AppBarItemType, AppBarMenuState, AppBarOverflowIndicator, AppBarOverflowIndicatorProps, AppBarRow, AppBarRowProps, AppBarScrollBehavior, AppBarTokens, BaseAppBarProps, BottomAppBar, BottomAppBarProps, BottomDockedToolbar, BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FlexibleAppBarProps, FloatingToolbarColors, FloatingToolbarProps, FloatingToolbarScrollBehavior, FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupPosition, MenuGroupProps, MenuItem, MenuItemPosition, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarProps, NavigationBarVariant, NavigationRail, NavigationRailItem, NavigationRailItemProps, NavigationRailLabelVisibility, NavigationRailProps, NavigationRailVariant, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, SearchAppBarProps, SearchBar, SearchBarVariant, SearchProps, SearchStyleType, SearchTokens, SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SearchViewProps, SmallAppBar, SmallAppBarProps, SubMenu, SubMenuProps, Tab, TabProps, Tabs, TabsColors, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTokens, TabsVariant, TitleAlignment, ToolbarDivider, ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonProps, ToolbarIconButtonSize, ToolbarIconButtonTokens, ToolbarIconButtonVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuGroupProps, VerticalMenuProps, VerticalMenuSeparatorStyle, appBarTypography, standardFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors } from './navigation.mjs';
 export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.mjs';
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-MXj_kyNt.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-D_PLPb-u.mjs';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-D-gs0gfj.mjs';
 export { Card, CardProps, CodeBlock, CodeBlockProps, Divider, DividerProps, LIST_TOKENS, List, ListContext, ListDivider, ListDividerProps, ListItem, ListItemLeadingType, ListItemProps, ListItemTrailingType, ListProps, ListSelectionMode, ListStyle, ListVariant, TableOfContents, TableOfContentsProps, Text, TextProps, ToCItem, TypeScaleTokens, TypeScaleTokensType, buildWavePath, getExpressiveShape, getListItemHeight, shouldTopAlign, useListContext } from './layout.mjs';
 export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-eAIpz9z1.mjs';
 export { DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DateLocale, DatePicker, DatePickerDialog, DatePickerDialogProps, DatePickerInput, DatePickerInputProps, DatePickerProps, DatePickerState, DateRange, DateRangePicker, DateRangePickerProps, DateRangePickerState, DisplayMode, SelectableDates, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, TimeInput, TimeInputProps, TimePicker, TimePickerDialog, TimePickerDialogProps, TimePickerLayout, TimePickerProps, TimePickerSelectionMode, TimePickerState, UseDatePickerStateOptions, UseDateRangePickerStateOptions, UseTimePickerStateOptions, useDatePickerState, useDateRangePickerState, useTimePickerState } from './pickers.mjs';
-export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-BY6VCC8p.mjs';
+export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-64FGhDxL.mjs';
 export { S as ScrollArea, a as ScrollAreaOrientation, b as ScrollAreaProps, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.mjs';
 export { M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, u as useTypography } from './typography-339RV6v7.mjs';
 import 'react';
@@ -22,3 +23,64 @@ import 'class-variance-authority/types';
 import 'class-variance-authority';
 import '@radix-ui/react-dialog';
 import '@radix-ui/react-scroll-area';
+
+interface CreateMd3ThemeOptions {
+    /** Seed color in hex format, e.g. `"#6750A4"`. */
+    seedColor: string;
+    /** Whether to generate a dark scheme. Defaults to `false`. */
+    isDark?: boolean;
+    /**
+     * Color scheme variant. Defaults to `"expressive"` (MD3 Expressive 2025).
+     * @see SchemeVariant
+     */
+    variant?: SchemeVariant;
+    /**
+     * Contrast adjustment. Defaults to `0` (standard).
+     * - `0` — Standard
+     * - `0.5` — Medium contrast
+     * - `1` — Maximum contrast (WCAG AAA)
+     */
+    contrastLevel?: ContrastLevel;
+}
+interface Md3ThemeResult {
+    /**
+     * Flat map of CSS custom properties that can be injected into a style block.
+     * Keys use `--md-sys-color-*` naming.
+     *
+     * @example
+     * Object.entries(cssVariables).forEach(([k, v]) => {
+     *   document.documentElement.style.setProperty(k, v);
+     * });
+     */
+    cssVariables: Record<string, string>;
+    /** Fully-typed color scheme object with camelCase role names. */
+    colorScheme: MD3ColorScheme;
+}
+/**
+ * High-level one-call API to generate a Material 3 Expressive theme.
+ *
+ * Returns both a CSS variable map (for injection into the DOM or SSR style tags)
+ * and a typed `MD3ColorScheme` object for use in TypeScript.
+ *
+ * Uses **SpecVersion 2025** and **Variant.EXPRESSIVE** by default, aligning with
+ * the MD3 Expressive 2025 color specification.
+ *
+ * @example
+ * const { cssVariables } = createMd3ExpressiveTheme({ seedColor: "#6750A4" });
+ * // Inject at runtime:
+ * for (const [k, v] of Object.entries(cssVariables)) {
+ *   document.documentElement.style.setProperty(k, v);
+ * }
+ *
+ * @example
+ * // High-contrast dark scheme with tonal_spot variant
+ * const theme = createMd3ExpressiveTheme({
+ *   seedColor: "#00639B",
+ *   isDark: true,
+ *   variant: "tonal_spot",
+ *   contrastLevel: 1,
+ * });
+ */
+declare function createMd3ExpressiveTheme(options: CreateMd3ThemeOptions): Md3ThemeResult;
+
+export { ContrastLevel, type CreateMd3ThemeOptions, MD3ColorScheme, type Md3ThemeResult, SchemeVariant, createMd3ExpressiveTheme };

package/dist/index.d.ts

@@ -1,14 +1,15 @@
-export { Icon, IconProps, MD3ColorScheme, MD3ThemeProvider, MD3ThemeProviderProps, MaterialSymbolsPreconnect, Ripple, RippleOrigin, RippleProps, ThemeMode, UseRippleStateOptions, applyTheme, cn, generateM3Theme, resolveMode, useDOMRipple, useMediaQuery, useRipple, useRippleState, useTheme, useThemeMode } from './core.js';
+import { S as SchemeVariant, C as ContrastLevel, M as MD3ColorScheme } from './core-Bc5Wj_pc.js';
+export { G as GenerateM3ThemeOptions, I as Icon, a as IconProps, 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-Bc5Wj_pc.js';
 export { ANGLE_EPSILON, CornerFeature, CornerRounding, Cubic, CubicPair, DISTANCE_EPSILON, DoubleMapper, EdgeFeature, FLOAT_PI, Feature, MD3CornerRadius, MD3CornerRadiusToken, MD3ShapeName, MD3Shapes, MeasuredCubic, MeasuredFeature, MeasuredPolygon, Morph, MorphTrigger, MutableCubic, Point, PointTransformer, RoundedPolygon, ShapeIcon, ShapeIconProps, ShapeMedia, ShapeMediaProps, ShapeMediaServer, ShapeMorphOptions, ShapeRef, ShapeSvg, ShapeSvgProps, UNROUNDED, UseShapeMorphResult, addPoints, circle, clockwise, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, getDirection, getDistance, getDistanceSquared, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, rotate90, scalePoint, square, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useShapeMorph } from './shapes.js';
-export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-DFhj-NZj.js';
+export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.js';
 export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColors, AppBarColumn, AppBarColumnProps, AppBarItem, AppBarItemType, AppBarMenuState, AppBarOverflowIndicator, AppBarOverflowIndicatorProps, AppBarRow, AppBarRowProps, AppBarScrollBehavior, AppBarTokens, BaseAppBarProps, BottomAppBar, BottomAppBarProps, BottomDockedToolbar, BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FlexibleAppBarProps, FloatingToolbarColors, FloatingToolbarProps, FloatingToolbarScrollBehavior, FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupPosition, MenuGroupProps, MenuItem, MenuItemPosition, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarProps, NavigationBarVariant, NavigationRail, NavigationRailItem, NavigationRailItemProps, NavigationRailLabelVisibility, NavigationRailProps, NavigationRailVariant, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, SearchAppBarProps, SearchBar, SearchBarVariant, SearchProps, SearchStyleType, SearchTokens, SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SearchViewProps, SmallAppBar, SmallAppBarProps, SubMenu, SubMenuProps, Tab, TabProps, Tabs, TabsColors, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTokens, TabsVariant, TitleAlignment, ToolbarDivider, ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonProps, ToolbarIconButtonSize, ToolbarIconButtonTokens, ToolbarIconButtonVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuGroupProps, VerticalMenuProps, VerticalMenuSeparatorStyle, appBarTypography, standardFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors } from './navigation.js';
 export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.js';
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-C5CLCIKP.js';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-BkPbiBo3.js';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-D-gs0gfj.js';
 export { Card, CardProps, CodeBlock, CodeBlockProps, Divider, DividerProps, LIST_TOKENS, List, ListContext, ListDivider, ListDividerProps, ListItem, ListItemLeadingType, ListItemProps, ListItemTrailingType, ListProps, ListSelectionMode, ListStyle, ListVariant, TableOfContents, TableOfContentsProps, Text, TextProps, ToCItem, TypeScaleTokens, TypeScaleTokensType, buildWavePath, getExpressiveShape, getListItemHeight, shouldTopAlign, useListContext } from './layout.js';
 export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-eAIpz9z1.js';
 export { DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DateLocale, DatePicker, DatePickerDialog, DatePickerDialogProps, DatePickerInput, DatePickerInputProps, DatePickerProps, DatePickerState, DateRange, DateRangePicker, DateRangePickerProps, DateRangePickerState, DisplayMode, SelectableDates, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, TimeInput, TimeInputProps, TimePicker, TimePickerDialog, TimePickerDialogProps, TimePickerLayout, TimePickerProps, TimePickerSelectionMode, TimePickerState, UseDatePickerStateOptions, UseDateRangePickerStateOptions, UseTimePickerStateOptions, useDatePickerState, useDateRangePickerState, useTimePickerState } from './pickers.js';
-export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-CglP6KYA.js';
+export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-Bd5Qqvp9.js';
 export { S as ScrollArea, a as ScrollAreaOrientation, b as ScrollAreaProps, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.js';
 export { M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, u as useTypography } from './typography-339RV6v7.js';
 import 'react';
@@ -22,3 +23,64 @@ import 'class-variance-authority/types';
 import 'class-variance-authority';
 import '@radix-ui/react-dialog';
 import '@radix-ui/react-scroll-area';
+
+interface CreateMd3ThemeOptions {
+    /** Seed color in hex format, e.g. `"#6750A4"`. */
+    seedColor: string;
+    /** Whether to generate a dark scheme. Defaults to `false`. */
+    isDark?: boolean;
+    /**
+     * Color scheme variant. Defaults to `"expressive"` (MD3 Expressive 2025).
+     * @see SchemeVariant
+     */
+    variant?: SchemeVariant;
+    /**
+     * Contrast adjustment. Defaults to `0` (standard).
+     * - `0` — Standard
+     * - `0.5` — Medium contrast
+     * - `1` — Maximum contrast (WCAG AAA)
+     */
+    contrastLevel?: ContrastLevel;
+}
+interface Md3ThemeResult {
+    /**
+     * Flat map of CSS custom properties that can be injected into a style block.
+     * Keys use `--md-sys-color-*` naming.
+     *
+     * @example
+     * Object.entries(cssVariables).forEach(([k, v]) => {
+     *   document.documentElement.style.setProperty(k, v);
+     * });
+     */
+    cssVariables: Record<string, string>;
+    /** Fully-typed color scheme object with camelCase role names. */
+    colorScheme: MD3ColorScheme;
+}
+/**
+ * High-level one-call API to generate a Material 3 Expressive theme.
+ *
+ * Returns both a CSS variable map (for injection into the DOM or SSR style tags)
+ * and a typed `MD3ColorScheme` object for use in TypeScript.
+ *
+ * Uses **SpecVersion 2025** and **Variant.EXPRESSIVE** by default, aligning with
+ * the MD3 Expressive 2025 color specification.
+ *
+ * @example
+ * const { cssVariables } = createMd3ExpressiveTheme({ seedColor: "#6750A4" });
+ * // Inject at runtime:
+ * for (const [k, v] of Object.entries(cssVariables)) {
+ *   document.documentElement.style.setProperty(k, v);
+ * }
+ *
+ * @example
+ * // High-contrast dark scheme with tonal_spot variant
+ * const theme = createMd3ExpressiveTheme({
+ *   seedColor: "#00639B",
+ *   isDark: true,
+ *   variant: "tonal_spot",
+ *   contrastLevel: 1,
+ * });
+ */
+declare function createMd3ExpressiveTheme(options: CreateMd3ThemeOptions): Md3ThemeResult;
+
+export { ContrastLevel, type CreateMd3ThemeOptions, MD3ColorScheme, type Md3ThemeResult, SchemeVariant, createMd3ExpressiveTheme };

package/dist/index.js

@@ -2,8 +2,8 @@
 'use strict';
 
 var React59 = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var materialColorUtilities = require('@material/material-color-utilities');
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var RxContextMenu = require('@radix-ui/react-context-menu');
@@ -143,6 +143,143 @@ function useRipple(options = {}) {
   );
   return { rippleRef: ref, onPointerDown };
 }
+function resolveMode(mode) {
+  if (mode !== "system") return mode;
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function createDynamicScheme(sourceColorHex, isDark, variant = "expressive", contrastLevel = 0) {
+  const hct = materialColorUtilities.Hct.fromInt(argbFromHex(sourceColorHex));
+  const spec = "2025";
+  switch (variant) {
+    case "tonal_spot":
+      return new materialColorUtilities.SchemeTonalSpot(hct, isDark, contrastLevel, spec);
+    case "vibrant":
+      return new materialColorUtilities.SchemeVibrant(hct, isDark, contrastLevel, spec);
+    case "fidelity":
+      return new materialColorUtilities.SchemeFidelity(hct, isDark, contrastLevel, spec);
+    case "content":
+      return new materialColorUtilities.SchemeContent(hct, isDark, contrastLevel, spec);
+    case "monochrome":
+      return new materialColorUtilities.SchemeMonochrome(hct, isDark, contrastLevel, spec);
+    case "neutral":
+      return new materialColorUtilities.SchemeNeutral(hct, isDark, contrastLevel, spec);
+    default:
+      return new materialColorUtilities.SchemeExpressive(hct, isDark, contrastLevel, spec);
+  }
+}
+function argbFromHex(hex) {
+  const sanitized = hex.replace(/^#/, "");
+  const r = Number.parseInt(sanitized.substring(0, 2), 16);
+  const g = Number.parseInt(sanitized.substring(2, 4), 16);
+  const b = Number.parseInt(sanitized.substring(4, 6), 16);
+  return (4278190080 | r << 16 | g << 8 | b) >>> 0;
+}
+function generateM3Theme(sourceColorHex, mode = "light", options = {}) {
+  const { variant = "expressive", contrastLevel = 0 } = options;
+  const isDark = mode === "dark";
+  const scheme = createDynamicScheme(
+    sourceColorHex,
+    isDark,
+    variant,
+    contrastLevel
+  );
+  const hex = (argb) => materialColorUtilities.hexFromArgb(argb);
+  return {
+    // Primary
+    primary: hex(scheme.primary),
+    onPrimary: hex(scheme.onPrimary),
+    primaryContainer: hex(scheme.primaryContainer),
+    onPrimaryContainer: hex(scheme.onPrimaryContainer),
+    inversePrimary: hex(scheme.inversePrimary),
+    primaryFixed: hex(scheme.primaryFixed),
+    primaryFixedDim: hex(scheme.primaryFixedDim),
+    onPrimaryFixed: hex(scheme.onPrimaryFixed),
+    onPrimaryFixedVariant: hex(scheme.onPrimaryFixedVariant),
+    primaryDim: hex(scheme.primaryDim),
+    // Secondary
+    secondary: hex(scheme.secondary),
+    onSecondary: hex(scheme.onSecondary),
+    secondaryContainer: hex(scheme.secondaryContainer),
+    onSecondaryContainer: hex(scheme.onSecondaryContainer),
+    secondaryFixed: hex(scheme.secondaryFixed),
+    secondaryFixedDim: hex(scheme.secondaryFixedDim),
+    onSecondaryFixed: hex(scheme.onSecondaryFixed),
+    onSecondaryFixedVariant: hex(scheme.onSecondaryFixedVariant),
+    secondaryDim: hex(scheme.secondaryDim),
+    // Tertiary
+    tertiary: hex(scheme.tertiary),
+    onTertiary: hex(scheme.onTertiary),
+    tertiaryContainer: hex(scheme.tertiaryContainer),
+    onTertiaryContainer: hex(scheme.onTertiaryContainer),
+    tertiaryFixed: hex(scheme.tertiaryFixed),
+    tertiaryFixedDim: hex(scheme.tertiaryFixedDim),
+    onTertiaryFixed: hex(scheme.onTertiaryFixed),
+    onTertiaryFixedVariant: hex(scheme.onTertiaryFixedVariant),
+    tertiaryDim: hex(scheme.tertiaryDim),
+    // Error
+    error: hex(scheme.error),
+    onError: hex(scheme.onError),
+    errorContainer: hex(scheme.errorContainer),
+    onErrorContainer: hex(scheme.onErrorContainer),
+    // Surface
+    surface: hex(scheme.surface),
+    onSurface: hex(scheme.onSurface),
+    surfaceVariant: hex(scheme.surfaceVariant),
+    onSurfaceVariant: hex(scheme.onSurfaceVariant),
+    surfaceTint: hex(scheme.surfaceTint),
+    surfaceDim: hex(scheme.surfaceDim),
+    surfaceBright: hex(scheme.surfaceBright),
+    surfaceContainerLowest: hex(scheme.surfaceContainerLowest),
+    surfaceContainerLow: hex(scheme.surfaceContainerLow),
+    surfaceContainer: hex(scheme.surfaceContainer),
+    surfaceContainerHigh: hex(scheme.surfaceContainerHigh),
+    surfaceContainerHighest: hex(scheme.surfaceContainerHighest),
+    // Inverse
+    inverseSurface: hex(scheme.inverseSurface),
+    inverseOnSurface: hex(scheme.inverseOnSurface),
+    // Background
+    background: hex(scheme.background),
+    onBackground: hex(scheme.onBackground),
+    // Outline
+    outline: hex(scheme.outline),
+    outlineVariant: hex(scheme.outlineVariant),
+    // Utility
+    shadow: hex(scheme.shadow),
+    scrim: hex(scheme.scrim)
+  };
+}
+function applyTheme(sourceColorHex, mode = "light", root = document.documentElement, options = {}) {
+  const resolved = resolveMode(mode);
+  const colors = generateM3Theme(sourceColorHex, resolved, options);
+  for (const [key, value] of Object.entries(colors)) {
+    const kebabKey = key.replace(/[A-Z]/g, (m67) => `-${m67.toLowerCase()}`);
+    root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
+    root.style.setProperty(`--color-m3-${kebabKey}`, value);
+  }
+  root.setAttribute("data-theme", resolved);
+}
+
+// src/lib/create-theme.ts
+function createMd3ExpressiveTheme(options) {
+  const { seedColor, isDark = false, variant, contrastLevel } = options;
+  const themeOptions = { variant, contrastLevel };
+  const colorScheme = generateM3Theme(
+    seedColor,
+    isDark ? "dark" : "light",
+    themeOptions
+  );
+  const cssVariables = schemeToCssVariables(colorScheme);
+  return { cssVariables, colorScheme };
+}
+function schemeToCssVariables(scheme) {
+  const result = {};
+  for (const [key, value] of Object.entries(scheme)) {
+    const kebabKey = key.replace(/[A-Z]/g, (m67) => `-${m67.toLowerCase()}`);
+    result[`--md-sys-color-${kebabKey}`] = value;
+  }
+  return result;
+}
 function MaterialSymbolsPreconnect({
   variants = ["outlined"]
 }) {
@@ -182,78 +319,6 @@ function MaterialSymbolsPreconnect({
     )
   ] });
 }
-function resolveMode(mode) {
-  if (mode !== "system") return mode;
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function generateM3Theme(sourceColorHex, mode = "light") {
-  const sourceColor = materialColorUtilities.argbFromHex(sourceColorHex);
-  const theme = materialColorUtilities.themeFromSourceColor(sourceColor);
-  const scheme = mode === "light" ? theme.schemes.light : theme.schemes.dark;
-  const palettes = theme.palettes;
-  const tone = (palette, t) => materialColorUtilities.hexFromArgb(palette.tone(t));
-  return {
-    primary: materialColorUtilities.hexFromArgb(scheme.primary),
-    onPrimary: materialColorUtilities.hexFromArgb(scheme.onPrimary),
-    primaryContainer: materialColorUtilities.hexFromArgb(scheme.primaryContainer),
-    onPrimaryContainer: materialColorUtilities.hexFromArgb(scheme.onPrimaryContainer),
-    inversePrimary: materialColorUtilities.hexFromArgb(scheme.inversePrimary),
-    primaryFixed: tone(palettes.primary, 90),
-    primaryFixedDim: tone(palettes.primary, 80),
-    onPrimaryFixed: tone(palettes.primary, 10),
-    onPrimaryFixedVariant: tone(palettes.primary, 30),
-    secondary: materialColorUtilities.hexFromArgb(scheme.secondary),
-    onSecondary: materialColorUtilities.hexFromArgb(scheme.onSecondary),
-    secondaryContainer: materialColorUtilities.hexFromArgb(scheme.secondaryContainer),
-    onSecondaryContainer: materialColorUtilities.hexFromArgb(scheme.onSecondaryContainer),
-    secondaryFixed: tone(palettes.secondary, 90),
-    secondaryFixedDim: tone(palettes.secondary, 80),
-    onSecondaryFixed: tone(palettes.secondary, 10),
-    onSecondaryFixedVariant: tone(palettes.secondary, 30),
-    tertiary: materialColorUtilities.hexFromArgb(scheme.tertiary),
-    onTertiary: materialColorUtilities.hexFromArgb(scheme.onTertiary),
-    tertiaryContainer: materialColorUtilities.hexFromArgb(scheme.tertiaryContainer),
-    onTertiaryContainer: materialColorUtilities.hexFromArgb(scheme.onTertiaryContainer),
-    tertiaryFixed: tone(palettes.tertiary, 90),
-    tertiaryFixedDim: tone(palettes.tertiary, 80),
-    onTertiaryFixed: tone(palettes.tertiary, 10),
-    onTertiaryFixedVariant: tone(palettes.tertiary, 30),
-    error: materialColorUtilities.hexFromArgb(scheme.error),
-    onError: materialColorUtilities.hexFromArgb(scheme.onError),
-    errorContainer: materialColorUtilities.hexFromArgb(scheme.errorContainer),
-    onErrorContainer: materialColorUtilities.hexFromArgb(scheme.onErrorContainer),
-    surface: materialColorUtilities.hexFromArgb(scheme.surface),
-    onSurface: materialColorUtilities.hexFromArgb(scheme.onSurface),
-    surfaceVariant: materialColorUtilities.hexFromArgb(scheme.surfaceVariant),
-    onSurfaceVariant: materialColorUtilities.hexFromArgb(scheme.onSurfaceVariant),
-    surfaceTint: materialColorUtilities.hexFromArgb(scheme.primary),
-    // Surface container roles from neutral palette tones
-    surfaceContainerLowest: mode === "light" ? tone(palettes.neutral, 100) : tone(palettes.neutral, 4),
-    surfaceContainerLow: mode === "light" ? tone(palettes.neutral, 96) : tone(palettes.neutral, 10),
-    surfaceContainer: mode === "light" ? tone(palettes.neutral, 94) : tone(palettes.neutral, 12),
-    surfaceContainerHigh: mode === "light" ? tone(palettes.neutral, 92) : tone(palettes.neutral, 17),
-    surfaceContainerHighest: mode === "light" ? tone(palettes.neutral, 90) : tone(palettes.neutral, 22),
-    inverseSurface: materialColorUtilities.hexFromArgb(scheme.inverseSurface),
-    inverseOnSurface: materialColorUtilities.hexFromArgb(scheme.inverseOnSurface),
-    background: materialColorUtilities.hexFromArgb(scheme.background),
-    onBackground: materialColorUtilities.hexFromArgb(scheme.onBackground),
-    outline: materialColorUtilities.hexFromArgb(scheme.outline),
-    outlineVariant: materialColorUtilities.hexFromArgb(scheme.outlineVariant),
-    shadow: materialColorUtilities.hexFromArgb(scheme.shadow),
-    scrim: materialColorUtilities.hexFromArgb(scheme.scrim)
-  };
-}
-function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
-  const resolved = resolveMode(mode);
-  const colors = generateM3Theme(sourceColorHex, resolved);
-  for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m67) => `-${m67.toLowerCase()}`);
-    root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
-    root.style.setProperty(`--color-m3-${kebabKey}`, value);
-  }
-  root.setAttribute("data-theme", resolved);
-}
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -6584,6 +6649,35 @@ var BUTTON_COLOR_TOKENS = {
     default: "bg-transparent text-m3-primary",
     selected: "bg-transparent text-m3-primary",
     unselected: "bg-transparent text-m3-primary"
+  },
+  // ── MD3 Expressive accent variants ──────────────────────────────────────
+  /**
+   * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+   * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+   */
+  tertiary: {
+    default: "bg-m3-tertiary text-m3-on-tertiary",
+    selected: "bg-m3-tertiary text-m3-on-tertiary",
+    unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+  },
+  /**
+   * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+   * Ideal for badges, pill chips, and elements that must carry the brand color
+   * regardless of the active theme.
+   */
+  "primary-fixed": {
+    default: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    selected: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant"
+  },
+  /**
+   * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+   * badges, or accent pills that need a fixed tertiary hue across themes.
+   */
+  "tertiary-fixed": {
+    default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant"
   }
 };
 var MOTION_PROP_KEYS = [
@@ -6955,7 +7049,7 @@ var PILL_BORDER_RADIUS = 9999;
 var MIN_FLEX_GROW = 0.01;
 var PADDING_EXPAND_MULTIPLIER = 4;
 var CHECK_ICON_SIZE = 24;
-var CHECK_ICON = /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", size: CHECK_ICON_SIZE, weight: 700 });
+var CHECK_ICON = /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", variant: "rounded", size: CHECK_ICON_SIZE, weight: 700 });
 var CHECK_ICON_GAP_MAP = {
   xs: 6,
   sm: 8,
@@ -9599,19 +9693,19 @@ var CardImpl = React59__namespace.forwardRef(
     const baseClass = cn(
       cardVariants({ variant }),
       // Disabled state:
-      // - pointer-events-none → vô hiệu hóa tương tác hoàn toàn
+      // - pointer-events-none → disable interactions completely
       // - opacity-[0.38] → MD3 DisabledContainerOpacity
       disabled && "pointer-events-none opacity-[0.38]",
       className
     );
     const interactiveClass = cn(
-      // Xóa outline default, dùng state overlay & elevation của MD3 để biểu hiện focus
+      // Remove default outline, use MD3 state overlay & elevation for focus
       "focus-visible:outline-none focus:outline-none group",
-      // Layer overlay base pseudo-element
+      // Base pseudo-element overlay layer
       "before:absolute before:inset-0 before:pointer-events-none before:bg-m3-on-surface before:opacity-0 before:transition-opacity before:duration-200",
-      // Interactive states opacities
+      // Interactive state opacities
       "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]",
-      // Outlined interactive card: đổi màu border sang m3-outline khi focus/press/hover
+      // Outlined interactive card: change border color to m3-outline on focus/press/hover
       variant === "outlined" && "hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
     if (!isInteractive) {
@@ -12653,7 +12747,7 @@ var TimeInput = ({ state, className }) => {
                 fontWeight: 400,
                 lineHeight: 1,
                 width: 24,
-                // Căn theo height của input field
+                // Aligned with height of input field
                 marginTop: `${(TP_SIZE.timeFieldHeight - 57) / 2}px`
               },
               "aria-hidden": true,
@@ -13467,7 +13561,7 @@ var DrawerContent = React59__namespace.forwardRef(
       react.m.div,
       __spreadProps(__spreadValues({
         className: cn(
-          // MD3 Bottom Sheet shape: chỉ bo góc trên
+          // MD3 Bottom Sheet shape: top rounded corners only
           "fixed bottom-0 left-0 right-0 z-50",
           "rounded-t-[28px] bg-m3-surface-container-low",
           "flex flex-col overflow-hidden",
@@ -13496,7 +13590,7 @@ var DrawerContent = React59__namespace.forwardRef(
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
                 "transition-colors duration-200"
               ),
-              "aria-label": "\u0110\xF3ng b\u1EA3ng \u0111i\u1EC1u khi\u1EC3n",
+              "aria-label": "Close drawer panel",
               children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", size: 20, "aria-hidden": "true" })
             }
           ),
@@ -22339,6 +22433,8 @@ function MD3ThemeProvider({
   sourceColor: initialSourceColor = "#6750A4",
   defaultMode = "light",
   persistToLocalStorage = false,
+  variant = "expressive",
+  contrastLevel = 0,
   typography: typographyProp,
   fontFamily,
   fontVariationAxes,
@@ -22347,6 +22443,17 @@ function MD3ThemeProvider({
   const [sourceColor, setSourceColor] = React59.useState(initialSourceColor);
   const [mode, setMode] = React59.useState(defaultMode);
   const [isHydrated, setIsHydrated] = React59.useState(!persistToLocalStorage);
+  const [systemMode, setSystemMode] = React59.useState("light");
+  React59.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateSystemMode = () => {
+      setSystemMode(mediaQuery.matches ? "dark" : "light");
+    };
+    updateSystemMode();
+    mediaQuery.addEventListener("change", updateSystemMode);
+    return () => mediaQuery.removeEventListener("change", updateSystemMode);
+  }, []);
   React59.useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
@@ -22358,25 +22465,37 @@ function MD3ThemeProvider({
       setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
+  const effectiveMode = mode === "system" ? systemMode : mode;
   React59.useEffect(() => {
     if (!isHydrated) return;
-    applyTheme(sourceColor, mode);
+    applyTheme(sourceColor, effectiveMode, document.documentElement, {
+      variant,
+      contrastLevel
+    });
     if (persistToLocalStorage) {
       localStorage.setItem(STORAGE_KEY_COLOR, sourceColor);
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
-  }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
-  React59.useEffect(() => {
-    if (mode !== "system" || typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => applyTheme(sourceColor, "system");
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [mode, sourceColor]);
-  const effectiveMode = resolveMode(mode);
+  }, [
+    sourceColor,
+    mode,
+    effectiveMode,
+    persistToLocalStorage,
+    isHydrated,
+    variant,
+    contrastLevel
+  ]);
   const themeValue = React59.useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
-    [sourceColor, mode, effectiveMode]
+    () => ({
+      sourceColor,
+      setSourceColor,
+      mode,
+      setMode,
+      effectiveMode,
+      variant,
+      contrastLevel
+    }),
+    [sourceColor, mode, effectiveMode, variant, contrastLevel]
   );
   const typographyValue = React59.useMemo(() => {
     if (typographyProp) return typographyProp;
@@ -23912,6 +24031,7 @@ exports.convex = convex;
 exports.cornerFeature = cornerFeature;
 exports.cornerRounding = cornerRounding;
 exports.createDoubleMapper = createDoubleMapper;
+exports.createMd3ExpressiveTheme = createMd3ExpressiveTheme;
 exports.directionVector = directionVector;
 exports.distance = distance;
 exports.distanceSquared = distanceSquared;