@bug-on/m3-expressive 1.3.3 → 1.3.5

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";`
 
 ---
@@ -222,16 +225,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`
 
 ---
 

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.3",
+  "version": "1.3.5",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",
@@ -174,33 +174,33 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@material/material-color-utilities": "^0.4.0",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-slot": "^1.3.3",
     "@use-gesture/react": "^10.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.3.1",
-    "@bug-on/m3-tokens": "1.2.2",
-    "@bug-on/m3-tailwind": "1.2.2"
+    "tailwind-merge": "^3.6.0",
+    "@bug-on/m3-tailwind": "1.2.3",
+    "@bug-on/m3-tokens": "1.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/jest-axe": "^3.5.9",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/coverage-v8": "4.1.4",
-    "jest-axe": "^10.0.0",
-    "jsdom": "^29.0.0",
-    "tsup": "^8.4.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/coverage-v8": "^4.1.11",
+    "jest-axe": "^11.0.0",
+    "jsdom": "^30.0.1",
+    "tsup": "^8.5.1",
     "typescript": "5.8.3",
-    "vite": ">=8.0.5",
-    "vitest": "^4.1.6"
+    "vite": ">=8.2.2",
+    "vitest": "^4.1.11"
   },
   "scripts": {
     "prebuild": "node -e \"const fs=require('fs'); if(fs.existsSync('../../llms.txt')) { fs.copyFileSync('../../llms.txt', 'llms.txt'); fs.copyFileSync('../../llms-full.txt', 'llms-full.txt'); }\"",