cleanplate 0.3.2 → 0.3.3

package/docs/AppShell.md

@@ -11,6 +11,8 @@ Purpose: Full-page layout that combines an optional Header (top), optional Foote
 | footer | ReactNode \| FooterProps | no | — | Bottom bar: pass Footer props object or custom ReactNode. Omit to hide footer. |
 | sidebar | AppShellSidebarConfig | no | — | Sidebar config (MenuList as vertical nav on the left). Omit to hide sidebar. |
 | sidebarWidth | string | no | "240px" | Width of the sidebar (e.g. "240px", "16rem"). |
+| mobileSidebarDrawer | boolean | no | *see below* | When `sidebar` is set: show a Floating UI drawer + trigger on narrow viewports (≤1024px). Default `false` if `header` is `HeaderProps` (header mobile menu); otherwise default `true`. |
+| mobileSidebarDrawerLabel | string | no | "Main navigation" | Accessible name (`aria-label`) for the mobile navigation dialog. |
 | className | string | no | "" | Additional class name for the root element. |
 | contentClassName | string | no | "" | Additional class name for the main content wrapper. |
 
@@ -35,6 +37,8 @@ interface AppShellProps {
   footer?: React.ReactNode | FooterProps;
   sidebar?: AppShellSidebarConfig;
   sidebarWidth?: string;
+  mobileSidebarDrawer?: boolean;
+  mobileSidebarDrawerLabel?: string;
   className?: string;
   contentClassName?: string;
 }
@@ -133,7 +137,7 @@ const Dashboard = () => {
 - **Layout:** Root is a flex column with `min-height: 100vh`. Header and footer slots are full width; body is a flex row (sidebar + main). Main area is scrollable.
 - **Header / footer:** When `header` or `footer` is a plain object with Header/Footer props (e.g. `menuItems` for header), the component renders `<Header {...header} />` or `<Footer {...footer} />`. Otherwise it renders the ReactNode as-is.
 - **Sidebar:** Rendered in an `<aside aria-label="Main navigation">` with MenuList `direction="vertical"`. Width from `sidebarWidth` (inline style).
-- **Responsive:** At viewport width ≤ 1024px the sidebar is hidden via CSS. Pass the same `menuItems` and `activeMenuItem` / `onMenuItemClick` to `header` so the header’s mobile menu provides navigation.
+- **Responsive:** At viewport width ≤ 1024px the sidebar column is hidden via CSS. When `header` is `HeaderProps`, the default is to rely on the header’s mobile menu for the same items. When there is no header (or `mobileSidebarDrawer` is `true`), AppShell renders a **Floating UI** mobile drawer: fixed menu trigger, `FloatingPortal` + `FloatingOverlay` (scroll lock) + `FloatingFocusManager` (modal focus), dismiss on overlay press and Escape, and the same `MenuList` as the sidebar.
 - **No root spacing props:** AppShell does not expose margin/padding; use `className` or `contentClassName` for layout.
 
 ## Related Components / Links

package/llms.txt

@@ -229,7 +229,7 @@ All component documentation is located in the `docs/` folder. The following docu
 ### AppShell Component
 - File: `docs/AppShell.md`
 - Purpose: Full-page layout combining optional Header (top), Footer (bottom), and MenuList as left sidebar with main content. For dashboard-style apps.
-- Key Features: header (Header props or ReactNode), footer (Footer props or ReactNode), sidebar (AppShellSidebarConfig: items, activeItem, onMenuClick, size, variant), sidebarWidth, responsive (sidebar hidden ≤1024px; use header mobile menu)
+- Key Features: header (Header props or ReactNode), footer (Footer props or ReactNode), sidebar (AppShellSidebarConfig: items, activeItem, onMenuClick, size, variant), sidebarWidth, mobileSidebarDrawer / mobileSidebarDrawerLabel, responsive (sidebar column hidden ≤1024px; default Floating UI drawer when no HeaderProps header, else header mobile menu)
 - Types: AppShellProps, AppShellSidebarConfig
 - Related Components: Header, Footer, MenuList (sidebar), Container, Typography, Avatar
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cleanplate",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "CleanPlate - A Headless React UI Framework",
   "files": [
     "dist",