@soroush.tech/design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/README.md

@@ -89,17 +89,16 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 ### Layout & surfaces
 
-| Component    | Purpose                                                                                   |
-| ------------ | ----------------------------------------------------------------------------------------- |
-| `View`       | Styled `div` primitive - the base building block                                          |
-| `Flex`       | `View` with flexbox defaults                                                              |
-| `Grid`       | CSS grid container                                                                        |
-| `PageLayout` | Page frame (bars, side panels, content) from `theme.layout`; `LayoutGrid` for its columns |
-| `Paper`      | Elevated surface with background and shadow                                               |
-| `Card`       | Content container built on `Paper`                                                        |
-| `Quote`      | Bordered quote / terminal-panel surface on `View`                                         |
-| `AppBar`     | Top application bar                                                                       |
-| `Drawer`     | Slide-in side panel                                                                       |
+| Component | Purpose                                           |
+| --------- | ------------------------------------------------- |
+| `View`    | Styled `div` primitive - the base building block  |
+| `Flex`    | `View` with flexbox defaults                      |
+| `Grid`    | CSS grid container                                |
+| `Paper`   | Elevated surface with background and shadow       |
+| `Card`    | Content container built on `Paper`                |
+| `Quote`   | Bordered quote / terminal-panel surface on `View` |
+| `AppBar`  | Top application bar                               |
+| `Drawer`  | Slide-in side panel                               |
 
 ### Content & data display
 
@@ -149,14 +148,14 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 Components never hardcode colors or sizes - props resolve against scales on the `Theme` object:
 
-| Group              | Scales                                                                                                |
-| ------------------ | ----------------------------------------------------------------------------------------------------- |
-| Color              | `palette` (main/light/dark/contrastText per color) · `text` · `background` · `border` · `colorScheme` |
-| Typography         | `typography` (variant map) · `fonts` · `fontSizes` · `fontWeights` · `lineHeights` · `letterSpacings` |
-| Space & shape      | `space` · `sizes` · `radii` · `borderWidths` · `shadows`                                              |
-| Layout             | `breakpoints` (tablet/web/wide) · `layout` (bars, panels, content columns per breakpoint)             |
-| Component scales   | `avatar` (size steps) · `skeleton` (wave highlight)                                                   |
-| Layering & effects | `zOrder` (appBar/drawer/modal) · `blur` · `logoFilter` · `portraitBlend` · `portraitOpacity`          |
+| Group              | Scales                                                                                                 |
+| ------------------ | ------------------------------------------------------------------------------------------------------ |
+| Color              | `palette` (main/light/dark/contrastText per color) · `text` · `background` · `border` · `colorScheme`  |
+| Typography         | `typography` (variant map) · `fonts` · `fontSizes` · `fontWeights` · `lineHeights` · `letterSpacings`  |
+| Space & shape      | `space` · `sizes` · `radii` · `borderWidths` · `shadows`                                               |
+| Layout             | `breakpoints` (xs/sm/md/lg/xl window classes) · `layout` (columns, margins, panels, top bar per class) |
+| Component scales   | `avatar` (size steps) · `skeleton` (wave highlight)                                                    |
+| Layering & effects | `zOrder` (appBar/drawer/modal) · `blur` · `logoFilter` · `portraitBlend` · `portraitOpacity`           |
 
 Prop types are derived from the interface (`keyof Theme['text']`), so adding a token to `themes.ts` propagates everywhere automatically. See [`design-system.md`](./design-system.md) for the full scale table and the palette rules.
 
@@ -190,11 +189,15 @@ const [isDark, setIsDark] = useState(true)
 
 ### Breakpoints and layout
 
-`theme.breakpoints` (`tablet` 600px, `web` 1200px, `wide` 1600px) is where responsive props change -
-`p={{ _: 2, web: 4 }}` or `p={[2, 3, 4]}`. `theme.layout` holds the page's columns, margins,
-gutters, side panels and bars per breakpoint, merged mobile-first; `PageLayout` and `LayoutGrid`
-lay a page out from it. Override both with `createTheme`; a breakpoint you add comes after the
-existing ones, so it must be larger. The full guide is the
+`theme.breakpoints` are Material 3's window classes, each a range from its start until the next:
+`xs` 0-599px (compact, the base), `sm` 600-839 (medium), `md` 840-1199 (expanded), `lg`
+1200-1599 (large), `xl` 1600+ (extra-large). Responsive props use them by name or position -
+`p={{ xs: 2, md: 4 }}`, `p={[2, 3, 4]}` - and `cqSm`-style keys write container queries;
+`theme.breakpoints.up('md')` and its siblings write queries for hand-written styles. Everything is
+CSS, so pages work with JavaScript off. `theme.layout` holds the layout tokens per class (columns,
+margins, gutters, side panels, top bar); `Grid` and `Flex` apply the column grid with
+`layout` / `layout={{ lg: { columns: 16 } }}`, and apps place `AppBar`, `Sidebar` and `Drawer`
+themselves. The full guide is the
 [Breakpoints and layout](./docs/theming.md#breakpoints-and-layout) section of the theming guide.
 
 ### Component defaults

package/dist/AppBar.cjs

@@ -1,9 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_Flex = require("./Flex.cjs");
-const require_PageLayoutContext = require("./PageLayoutContext-agXGhegE.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/AppBar/AppBar.tsx
@@ -62,12 +60,10 @@ const AppBarBase = require_src.styled(require_Flex.Flex, {
 	width: "100%"
 }, elevationVariant, sizeVariants);
 function AppBar({ elevation = 4, size, ...rest }) {
-	const isInBar = (0, react.useContext)(require_PageLayoutContext.PageLayoutContext)?.region === "bar";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppBarBase, {
 		as: "header",
 		elevation,
 		size,
-		...isInBar && { height: "100%" },
 		...rest
 	});
 }

package/dist/AppBar.d.cts

@@ -1,6 +1,6 @@
-import { S as Theme } from "./themes-9YNnlVyY.cjs";
-import "./index-DkJzi96w.cjs";
-import { n as FlexProps } from "./index-BMJ3tyIw.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { n as FlexProps } from "./index-Da9Sr6v7.cjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.d.mts

@@ -1,6 +1,6 @@
-import { S as Theme } from "./themes-9YNnlVyY.mjs";
-import "./index-CEqa8xx8.mjs";
-import { n as FlexProps } from "./index-B41OXLX8.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as FlexProps } from "./index-C-ACdUhw.mjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.mjs

@@ -1,8 +1,6 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { Flex } from "./Flex.mjs";
-import { t as PageLayoutContext } from "./PageLayoutContext-DjJ1_7Xc.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/AppBar/AppBar.tsx
 const shouldForwardProp = createShouldForwardProp([
@@ -60,12 +58,10 @@ const AppBarBase = styled(Flex, {
 	width: "100%"
 }, elevationVariant, sizeVariants);
 function AppBar({ elevation = 4, size, ...rest }) {
-	const isInBar = useContext(PageLayoutContext)?.region === "bar";
 	return /* @__PURE__ */ jsx(AppBarBase, {
 		as: "header",
 		elevation,
 		size,
-		...isInBar && { height: "100%" },
 		...rest
 	});
 }

package/dist/Avatar.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BmEAXmwh.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Avatar.d.cts

@@ -1,6 +1,6 @@
-import { S as Theme } from "./themes-9YNnlVyY.cjs";
-import "./index-DkJzi96w.cjs";
-import { n as FlexProps } from "./index-BMJ3tyIw.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { n as FlexProps } from "./index-Da9Sr6v7.cjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Avatar.d.mts

@@ -1,6 +1,6 @@
-import { S as Theme } from "./themes-9YNnlVyY.mjs";
-import "./index-CEqa8xx8.mjs";
-import { n as FlexProps } from "./index-B41OXLX8.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as FlexProps } from "./index-C-ACdUhw.mjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Avatar.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-BQGlZoma.mjs";
+import { r as useTheme } from "./theme-C1o9qa2E.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Avatar/Avatar.tsx

package/dist/Backdrop.d.cts

@@ -1,4 +1,4 @@
-import { s as ViewProps } from "./index-CvWslVk6.cjs";
+import { s as ViewProps } from "./index-B2LR3Y5d.cjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Backdrop.d.mts

@@ -1,4 +1,4 @@
-import { s as ViewProps } from "./index-tv-TGYSG.mjs";
+import { s as ViewProps } from "./index-AlVOmB-K.mjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Button.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-BmEAXmwh.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
 const require_CircularProgress = require("./CircularProgress.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
 let react = require("react");

package/dist/Button.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-S3NZS-Qp.cjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-6BHvkjdp.cjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-D4i9vrQM.mjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-DLtzp-Mg.mjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-BQGlZoma.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-C1o9qa2E.mjs";
 import { CircularProgress } from "./CircularProgress.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
 import { useContext } from "react";

package/dist/ButtonGroup.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-CCrocxBL.cjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-CJWXZFFZ.cjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-BNpkmtaM.mjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-CaCfFN31.mjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/Card.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BmEAXmwh.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-CKLBJ7CC.cjs");
+const require_Icon = require("./Icon-Cn6Zx8wb.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Card/Card.tsx

package/dist/Card.d.cts

@@ -1,6 +1,6 @@
-import { r as PaperProps } from "./index-BGD4OzzG.cjs";
-import { a as TypographyProps } from "./index-bN91IhZi.cjs";
-import { n as IconProps, r as IconName } from "./index-DPHwCZYf.cjs";
+import { r as PaperProps } from "./index-OWbQXOvw.cjs";
+import { a as TypographyProps } from "./index-DClEfecw.cjs";
+import { n as IconProps, r as IconName } from "./index-wJbUPxSk.cjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.d.mts

@@ -1,6 +1,6 @@
-import { r as PaperProps } from "./index-BSR9zrAA.mjs";
-import { a as TypographyProps } from "./index-DuefjNlC.mjs";
-import { n as IconProps, r as IconName } from "./index-r2avCy1z.mjs";
+import { r as PaperProps } from "./index-CorVAOY7.mjs";
+import { a as TypographyProps } from "./index-COYl2TN0.mjs";
+import { n as IconProps, r as IconName } from "./index-Dyfu-Otn.mjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.mjs

@@ -1,9 +1,9 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-BQGlZoma.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-C1o9qa2E.mjs";
 import { Paper } from "./Paper.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-CkQGOBmm.mjs";
+import { t as Icon } from "./Icon-BGcd6yy0.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Card/Card.tsx

package/dist/Checkbox.d.cts

@@ -1,5 +1,5 @@
-import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
-import "./index-DkJzi96w.cjs";
+import { T as Theme, x as PaletteColor } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/Checkbox.d.mts

@@ -1,5 +1,5 @@
-import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
-import "./index-CEqa8xx8.mjs";
+import { T as Theme, x as PaletteColor } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/CircularProgress.d.cts

@@ -1,6 +1,6 @@
-import { S as Theme } from "./themes-9YNnlVyY.cjs";
-import "./index-DkJzi96w.cjs";
-import { n as ButtonColor } from "./index-S3NZS-Qp.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { n as ButtonColor } from "./index-6BHvkjdp.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/CircularProgress.d.mts

@@ -1,6 +1,6 @@
-import { S as Theme } from "./themes-9YNnlVyY.mjs";
-import "./index-CEqa8xx8.mjs";
-import { n as ButtonColor } from "./index-D4i9vrQM.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as ButtonColor } from "./index-DLtzp-Mg.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/Drawer.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
+const require_Button = require("./Button.cjs");
 const require_Paper = require("./Paper.cjs");
-const require_Modal = require("./Modal-CApyh_V5.cjs");
-require("react");
+const require_FocusTrap = require("./FocusTrap.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
@@ -39,32 +40,123 @@ const anchorPosition = {
 		width: "100%"
 	}
 };
-const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["anchor", "duration"]);
-const DrawerPanel = require_src.styled(require_Paper.Paper, {
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	"anchor",
+	"duration",
+	"hasBackdrop"
+]);
+const DrawerPanel = require_src.styled("div", {
 	name: "Drawer",
 	label: "Drawer",
 	shouldForwardProp
-})(({ anchor, duration }) => ({
+})(({ theme, anchor, duration, hasBackdrop }) => ({
 	position: "fixed",
+	inset: "auto",
+	margin: 0,
+	padding: 0,
+	border: "none",
+	background: "transparent",
+	color: "inherit",
+	maxWidth: "100%",
+	maxHeight: "100%",
+	overflow: "visible",
 	...anchorPosition[anchor],
-	animation: `${slideIn[anchor]} ${duration}ms ease-out`,
-	"@media (prefers-reduced-motion: reduce)": { animation: "none" }
+	"&:popover-open": { animation: `${slideIn[anchor]} ${duration}ms ease-out` },
+	"&::backdrop": { backgroundColor: hasBackdrop ? theme.background.backdrop : "transparent" },
+	"@media (prefers-reduced-motion: reduce)": { "&:popover-open": { animation: "none" } }
 }));
 /**
-* @description A panel that slides in from a screen edge, built on Modal. Portals,
-* dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+* @description A panel that slides in from a screen edge. It is an HTML `popover`: a
+* `DrawerToggle` opens it, and Escape or a click outside closes it - all without JavaScript,
+* so it works on a prerendered page with scripts off. With JavaScript it can be controlled with
+* `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
 */
-function Drawer({ children, anchor = "left", elevation = 16, transitionDuration = 225, ...modalProps }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Modal.Modal, {
-		...modalProps,
-		layer: "drawer",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerPanel, {
-			anchor,
-			duration: transitionDuration,
+function Drawer({ id, children, isOpen, onClose, anchor = "left", elevation = 16, transitionDuration = 225, hasBackdrop = true, shouldLockScroll = true, shouldAutoFocus = true, shouldTrapFocus = true, shouldRestoreFocus = true }) {
+	const panelRef = (0, react.useRef)(null);
+	const [isShown, setIsShown] = (0, react.useState)(false);
+	const isShownRef = (0, react.useRef)(false);
+	const closingByProp = (0, react.useRef)(false);
+	const onCloseRef = (0, react.useRef)(onClose);
+	(0, react.useEffect)(() => {
+		onCloseRef.current = onClose;
+	}, [onClose]);
+	(0, react.useEffect)(() => {
+		const panel = panelRef.current;
+		let escaped = false;
+		const handleKeyDown = (event) => {
+			escaped = event.key === "Escape" && isShownRef.current;
+		};
+		const handleToggle = (event) => {
+			const open = event.newState === "open";
+			isShownRef.current = open;
+			setIsShown(open);
+			if (!open && !closingByProp.current) onCloseRef.current?.(event, escaped ? "escapeKey" : "dismiss");
+			closingByProp.current = false;
+			escaped = false;
+		};
+		const doc = panel.ownerDocument;
+		doc.addEventListener("keydown", handleKeyDown, true);
+		panel.addEventListener("toggle", handleToggle);
+		return () => {
+			doc.removeEventListener("keydown", handleKeyDown, true);
+			panel.removeEventListener("toggle", handleToggle);
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		if (isOpen === void 0 || isOpen === isShownRef.current) return;
+		const panel = panelRef.current;
+		isShownRef.current = isOpen;
+		if (isOpen) panel.showPopover();
+		else {
+			closingByProp.current = true;
+			panel.hidePopover();
+		}
+	}, [isOpen]);
+	(0, react.useEffect)(() => {
+		if (!isShown || !shouldLockScroll) return;
+		const { body } = panelRef.current.ownerDocument;
+		const previous = body.style.overflow;
+		body.style.overflow = "hidden";
+		return () => {
+			body.style.overflow = previous;
+		};
+	}, [isShown, shouldLockScroll]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerPanel, {
+		ref: panelRef,
+		id,
+		popover: "auto",
+		anchor,
+		duration: transitionDuration,
+		hasBackdrop,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Paper.Paper, {
 			elevation,
-			children
+			width: "100%",
+			height: "100%",
+			overflow: "auto",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusTrap.FocusTrap, {
+				isEnabled: isShown,
+				shouldAutoFocus,
+				shouldTrapFocus,
+				shouldEnforceFocus: false,
+				shouldRestoreFocus,
+				children
+			})
 		})
 	});
 }
 //#endregion
+//#region src/Drawer/DrawerToggle.tsx
+/**
+* @description The button that opens and closes a `Drawer`, through the HTML
+* `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
+*/
+function DrawerToggle({ drawer, action = "toggle", ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		popoverTarget: drawer,
+		popoverTargetAction: action,
+		...rest
+	});
+}
+//#endregion
 exports.Drawer = Drawer;
+exports.DrawerToggle = DrawerToggle;

package/dist/Drawer.d.cts

@@ -1,22 +1,58 @@
-import { n as PaperElevation } from "./index-BGD4OzzG.cjs";
-import { s as ModalProps } from "./index-B8KscJic.cjs";
+import { i as ButtonProps } from "./index-6BHvkjdp.cjs";
+import { n as PaperElevation } from "./index-OWbQXOvw.cjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
-interface DrawerProps extends Pick<ModalProps, 'isOpen' | 'onClose' | 'hasBackdrop' | 'shouldKeepMounted' | 'shouldUsePortal' | 'portalContainer' | 'shouldLockScroll' | 'shouldAutoFocus' | 'shouldTrapFocus' | 'shouldRestoreFocus'> {
+/** Why the drawer closed: the Escape key, or any other dismissal (a click outside, its toggle). */
+type DrawerCloseReason = 'escapeKey' | 'dismiss';
+interface DrawerProps {
+  /** The element id a `DrawerToggle`'s `drawer` names. */
+  id: string;
   /** The content of the drawer. */
   children: ReactNode;
+  /**
+   * Open state, for controlled use with JavaScript. Leave it out and the drawer opens and
+   * closes from its `DrawerToggle` alone - which also works with JavaScript disabled.
+   */
+  isOpen?: boolean;
+  /** Fired when the drawer closes by itself: Escape, a click outside, or its toggle. */
+  onClose?: (event: Event, reason: DrawerCloseReason) => void;
   /** Edge the drawer slides in from. Default: 'left'. */
   anchor?: DrawerAnchor;
   /** Shadow depth of the panel (0-24), forwarded to Paper. Default: 16. */
   elevation?: PaperElevation;
   /** Slide duration in milliseconds. Default: 225. */
   transitionDuration?: number;
+  /** Dim the page behind the open drawer. Default: true. */
+  hasBackdrop?: boolean;
+  /** With JavaScript: lock body scroll while open. Default: true. */
+  shouldLockScroll?: boolean;
+  /** With JavaScript: move focus into the drawer when it opens. Default: true. */
+  shouldAutoFocus?: boolean;
+  /** With JavaScript: keep Tab cycling within the open drawer. Default: true. */
+  shouldTrapFocus?: boolean;
+  /** With JavaScript: return focus to where it was when the drawer closes. Default: true. */
+  shouldRestoreFocus?: boolean;
 }
 /**
- * @description A panel that slides in from a screen edge, built on Modal. Portals,
- * dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+ * @description A panel that slides in from a screen edge. It is an HTML `popover`: a
+ * `DrawerToggle` opens it, and Escape or a click outside closes it - all without JavaScript,
+ * so it works on a prerendered page with scripts off. With JavaScript it can be controlled with
+ * `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
  */
-declare function Drawer({ children, anchor, elevation, transitionDuration, ...modalProps }: Readonly<DrawerProps>): import("react").JSX.Element;
+declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
 //#endregion
-export { Drawer, DrawerAnchor, DrawerProps };
+//#region src/Drawer/DrawerToggle.d.ts
+interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
+  /** The `id` of the `Drawer` this button opens and closes. */
+  drawer: string;
+  /** What a click does to the drawer. Default: 'toggle'. */
+  action?: 'toggle' | 'show' | 'hide';
+}
+/**
+ * @description The button that opens and closes a `Drawer`, through the HTML
+ * `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
+ */
+declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;
+//#endregion
+export { Drawer, DrawerAnchor, DrawerCloseReason, DrawerProps, DrawerToggle, DrawerToggleProps };

package/dist/Drawer.d.mts

@@ -1,22 +1,58 @@
-import { n as PaperElevation } from "./index-BSR9zrAA.mjs";
-import { s as ModalProps } from "./index-qtKJ56yu.mjs";
+import { i as ButtonProps } from "./index-DLtzp-Mg.mjs";
+import { n as PaperElevation } from "./index-CorVAOY7.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
-interface DrawerProps extends Pick<ModalProps, 'isOpen' | 'onClose' | 'hasBackdrop' | 'shouldKeepMounted' | 'shouldUsePortal' | 'portalContainer' | 'shouldLockScroll' | 'shouldAutoFocus' | 'shouldTrapFocus' | 'shouldRestoreFocus'> {
+/** Why the drawer closed: the Escape key, or any other dismissal (a click outside, its toggle). */
+type DrawerCloseReason = 'escapeKey' | 'dismiss';
+interface DrawerProps {
+  /** The element id a `DrawerToggle`'s `drawer` names. */
+  id: string;
   /** The content of the drawer. */
   children: ReactNode;
+  /**
+   * Open state, for controlled use with JavaScript. Leave it out and the drawer opens and
+   * closes from its `DrawerToggle` alone - which also works with JavaScript disabled.
+   */
+  isOpen?: boolean;
+  /** Fired when the drawer closes by itself: Escape, a click outside, or its toggle. */
+  onClose?: (event: Event, reason: DrawerCloseReason) => void;
   /** Edge the drawer slides in from. Default: 'left'. */
   anchor?: DrawerAnchor;
   /** Shadow depth of the panel (0-24), forwarded to Paper. Default: 16. */
   elevation?: PaperElevation;
   /** Slide duration in milliseconds. Default: 225. */
   transitionDuration?: number;
+  /** Dim the page behind the open drawer. Default: true. */
+  hasBackdrop?: boolean;
+  /** With JavaScript: lock body scroll while open. Default: true. */
+  shouldLockScroll?: boolean;
+  /** With JavaScript: move focus into the drawer when it opens. Default: true. */
+  shouldAutoFocus?: boolean;
+  /** With JavaScript: keep Tab cycling within the open drawer. Default: true. */
+  shouldTrapFocus?: boolean;
+  /** With JavaScript: return focus to where it was when the drawer closes. Default: true. */
+  shouldRestoreFocus?: boolean;
 }
 /**
- * @description A panel that slides in from a screen edge, built on Modal. Portals,
- * dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+ * @description A panel that slides in from a screen edge. It is an HTML `popover`: a
+ * `DrawerToggle` opens it, and Escape or a click outside closes it - all without JavaScript,
+ * so it works on a prerendered page with scripts off. With JavaScript it can be controlled with
+ * `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
  */
-declare function Drawer({ children, anchor, elevation, transitionDuration, ...modalProps }: Readonly<DrawerProps>): import("react").JSX.Element;
+declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
 //#endregion
-export { Drawer, DrawerAnchor, DrawerProps };
+//#region src/Drawer/DrawerToggle.d.ts
+interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
+  /** The `id` of the `Drawer` this button opens and closes. */
+  drawer: string;
+  /** What a click does to the drawer. Default: 'toggle'. */
+  action?: 'toggle' | 'show' | 'hide';
+}
+/**
+ * @description The button that opens and closes a `Drawer`, through the HTML
+ * `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
+ */
+declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;
+//#endregion
+export { Drawer, DrawerAnchor, DrawerCloseReason, DrawerProps, DrawerToggle, DrawerToggleProps };