@a-type/ui 6.1.18 → 6.1.20

package/dist/components/drawer/Drawer.d.ts

@@ -5,13 +5,12 @@ export interface DrawerContentProps extends DrawerPopupProps {
     ref?: Ref<HTMLDivElement>;
     innerClassName?: string;
 }
-export interface DrawerProps extends Omit<DrawerRootProps, 'children' | 'swipeDirection'> {
-    children: React.ReactNode;
+export interface DrawerProps extends Omit<DrawerRootProps, 'swipeDirection'> {
 }
 declare function DrawerClose({ children, render, ...props }: DrawerCloseProps & {
     ref?: React.Ref<HTMLButtonElement>;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const Drawer: (({ children, defaultSnapPoint, snapPoints, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Drawer: (({ children, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
     Trigger: ({ render, ...props }: DrawerTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Content: ({ ref, children, className, disableDefaultClose, innerClassName, ...props }: DrawerContentProps) => import("react/jsx-runtime").JSX.Element;
     Title: import("react").FunctionComponent<import("@base-ui/react/drawer").DrawerTitleProps>;

package/dist/components/drawer/Drawer.js

@@ -19,9 +19,8 @@ import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
 import { useParticles } from '../particles/ParticleContext.js';
-import { ScrollArea } from '../scrollArea/ScrollArea.js';
 import cls from './Drawer.module.css';
-const DrawerOverlay = withClassName(BaseDrawer.Backdrop, cls.overlay);
+const DrawerBackdrop = withClassName(BaseDrawer.Backdrop, cls.overlay);
 const StyledPopup = withClassName(BaseDrawer.Popup, cls.popup);
 const DrawerContent = function DrawerContent(_a) {
     var { ref, children, className, disableDefaultClose, innerClassName } = _a, props = __rest(_a, ["ref", "children", "className", "disableDefaultClose", "innerClassName"]);
@@ -63,7 +62,7 @@ const DrawerContent = function DrawerContent(_a) {
         }
     }, [particles]);
     const finalRef = useMergedRef(ref, openRef);
-    return (_jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerOverlay, {}), _jsx(BaseDrawer.Viewport, { className: cls.viewport, children: _jsxs(StyledPopup, Object.assign({ ref: finalRef }, props, { className: className, children: [!disableDefaultClose && _jsx(DrawerDefaultClose, {}), _jsx(DrawerSwipeHandle, {}), _jsx(ScrollArea, { direction: "vertical", className: cls.contentScrollArea, children: _jsx(ScrollArea.Content, { className: clsx(cls.contentScrollAreaContent, innerClassName), style: { minWidth: undefined }, children: children }) })] })) })] }));
+    return (_jsx(BaseDrawer.VirtualKeyboardProvider, { children: _jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerBackdrop, { "data-role": "backdrop" }), _jsx(BaseDrawer.Viewport, { className: cls.viewport, children: _jsxs(StyledPopup, Object.assign({ ref: finalRef }, props, { className: className, children: [!disableDefaultClose && _jsx(DrawerDefaultClose, {}), _jsx(DrawerSwipeHandle, {}), _jsx("div", { className: clsx(cls.contentScrollArea, innerClassName), children: children })] })) })] }) }));
 };
 function DrawerSwipeHandle(_a) {
     var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
@@ -75,10 +74,9 @@ function DrawerDefaultClose(_a) {
 }
 const DrawerTitle = withClassName(BaseDrawer.Title, cls.title);
 const DrawerDescription = withClassName(BaseDrawer.Description, cls.description);
-const defaultSnapPoints = [0.75, 1];
 const DrawerRoot = (_a) => {
-    var { children, defaultSnapPoint = 0.5, snapPoints = defaultSnapPoints } = _a, props = __rest(_a, ["children", "defaultSnapPoint", "snapPoints"]);
-    return (_jsx(BaseDrawer.Root, Object.assign({ swipeDirection: "down", defaultSnapPoint: defaultSnapPoint, snapPoints: snapPoints }, props, { children: _jsx(BaseDrawer.VirtualKeyboardProvider, { children: children }) })));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(BaseDrawer.Root, Object.assign({ swipeDirection: "down" }, props, { children: children })));
 };
 const DrawerTrigger = (_a) => {
     var { render } = _a, props = __rest(_a, ["render"]);

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/drawer/Drawer.module.css

@@ -1,21 +1,38 @@
 @layer components {.overlay {
+	--bleed: 3rem;
+	--swipe-opacity: 0.2;
+
 	position: fixed;
+	min-height: 100dvh;
 	inset: 0;
-	@apply --mx-shadow;
+
 	@apply --mx-bg(var(--m-gray-ink));
-	@apply --mx-bg-faded(5%);
+	opacity: calc(
+		0.2 + var(--swipe-opacity) * (1 - var(--drawer-swipe-progress, 0))
+	);
+
 	border-top: var(--m-lw) solid var(--m-gray);
-	transition: all var(--m-dur) var(--m-ease);
+
+	transition: all var(--m-dur-long) var(--m-ease);
+
 	backdrop-filter: blur(2px);
 
 	&[data-starting-style],
 	&[data-ending-style] {
 		opacity: 0;
 	}
+
+	&[data-swiping] {
+		transition-duration: 0ms;
+	}
+
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
 }
 
 .viewport {
-	--bleed: 100px;
+	--bleed: 3rem;
 
 	position: fixed;
 	inset: 0;
@@ -37,47 +54,60 @@
 	&[data-closed]::after {
 		opacity: 0;
 	}
+
+	/* While swiping, the popup's own bleed covers the bottom edge, so hide the
+     fixed fill — otherwise it paints white over the backdrop once the popup is
+     dragged far enough down. */
+	&:has([data-swiping])::after {
+		opacity: 0;
+	}
 }
 
 .popup {
+	--bleed: 3rem;
+	--top-gap: 1rem;
+
 	box-sizing: border-box;
 	position: relative;
 	z-index: 1;
 	max-width: unset;
 	width: 100%;
-	max-height: 85svh;
+	max-height: calc(100% - var(--top-gap) + var(--bleed));
+	height: calc(100% - var(--top-gap) + var(--bleed));
+	margin-bottom: calc(-1 * var(--bleed));
+	padding-bottom: max(
+		0px,
+		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
+	);
 
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
 
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-gray-heavy));
+
 	touch-action: none;
 
 	overflow: visible;
 
 	transition:
-		transform var(--m-dur) var(--m-ease),
-		opacity var(--m-dur) var(--m-ease);
+		transform var(--m-dur-long) var(--m-ease),
+		box-shadow var(--m-dur-long) var(--m-ease),
+		padding-bottom var(--m-dur-long) var(--m-ease);
 
 	--shadow-dir: -1;
 	@apply --mx-shadow;
 	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
 		var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
 
-	@apply --mx-bg(var(--m-surface-ambient-bg));
-	@apply --mx-borderColor(var(--m-gray-heavy));
-
 	border-radius: var(--m-surface-rd) var(--m-surface-rd) 0 0;
 	border-bottom-width: 0;
-	padding-bottom: max(
-		0px,
-		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
-	);
 
-	/* Use drawer's built-in swipe movement for animation */
 	transform: translateY(
 		calc(
-			var(--drawer-swipe-movement-y, 0px) + var(--drawer-snap-point-offset, 0px)
+			var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
+				var(--bleed)
 		)
 	);
 	will-change: transform;
@@ -85,32 +115,41 @@
 	/* Disable transitions while swiping so movement is immediate */
 	&[data-swiping] {
 		transition: none;
+		user-select: none;
 	}
 
 	&[data-starting-style],
 	&[data-ending-style] {
-		transform: translateY(100%);
+		transform: translateY(calc(100% - var(--bleed)));
 		padding-bottom: 0;
+		box-shadow: 0 0 0 transparent;
 	}
+
 	&[data-ending-style] {
-		transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		top: 100%;
+		height: var(--bleed);
+		background-color: inherit;
+		pointer-events: none;
 	}
 }
 
 .contentScrollArea {
-	width: 100%;
-	height: 100%;
 	flex: 1 1 auto;
 	min-height: 0;
 	overscroll-behavior: contain;
-}
-
-.contentScrollAreaContent {
+	touch-action: auto;
+	overflow-y: auto;
+	padding: var(--m-surface-p);
 	display: flex;
 	flex-direction: column;
 	gap: var(--m-sp-md);
-	padding: var(--m-surface-p);
-	overscroll-behavior: contain;
 }
 
 .swipeHandle {
@@ -160,7 +199,7 @@
 
 .actions {
 	position: sticky;
-	bottom: var(--m-sp-md);
+	bottom: 0;
 	z-index: 100;
 	display: flex;
 	flex-direction: row;
@@ -168,7 +207,6 @@
 	align-items: center;
 	justify-content: end;
 	align-self: end;
-	padding-bottom: --fn-literal(1px);
 	@apply --mx-shadow;
 	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
 		var(--m-shadow-md-spread) var(--m-gray-paper);
@@ -178,5 +216,21 @@
 	gap: var(--m-sp-sm);
 	border-radius: var(--m-surface-rd);
 	transition: bottom var(--m-dur) var(--m-ease);
+
+	/*
+		Hide the actions when the keyboard is open.
+		Done by moving them downward behind it.
+		This both fixes a bug with the positioning, and
+		gives the user more room to see.
+	*/
+	transform: translateY(calc(2 * var(--drawer-keyboard-inset, 0px)));
+	/*
+		Same but with modern CSS if()
+	*/
+	@supports (
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;)
+	) {
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;);
+	}
 }
 }

package/dist/components/drawer/Drawer.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../button/index.js';
+import { Input } from '../input/Input.js';
 import { H1, P } from '../typography/index.js';
 import { Drawer } from './Drawer.js';
 const meta = {
@@ -12,7 +13,7 @@ const meta = {
 };
 export default meta;
 function DummyContent() {
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(H1, { children: "Some content" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Button, { disabled: true, color: "primary", children: "Click me" })] }));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(H1, { children: "Some content" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." })] }));
 }
 export const Default = {
     args: {

package/dist/components/drawer/Drawer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAQ;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,SAAS,YAAY;IACpB,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,aACvD,KAAC,EAAE,+BAAkB,EACrB,KAAC,CAAC,8NAIE,EACJ,KAAC,MAAM,IAAC,QAAQ,QAAC,KAAK,EAAC,SAAS,yBAEvB,IACJ,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,8BAA2B,EACxC,KAAC,YAAY,KAAG,EAChB,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,KAAG,EAChB,KAAC,MAAM,IAAC,QAAQ,EAAC,SAAS,uBAAgB,IAC1B,IACD,IACf,CACH;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,IAAC,mBAAmB,mBAClC,KAAC,MAAM,CAAC,KAAK,mCAAgC,EAC7C,KAAC,YAAY,KAAG,EAChB,KAAC,MAAM,CAAC,OAAO,cACd,KAAC,MAAM,CAAC,KAAK,KAAG,GACA,IACD,IACf,CACH;KACD;CACD,CAAC"}
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAQ;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,SAAS,YAAY;IACpB,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,aACvD,KAAC,EAAE,+BAAkB,EACrB,KAAC,CAAC,8NAIE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,8NAIE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,IACpC,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,8BAA2B,EACxC,KAAC,YAAY,KAAG,EAChB,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,KAAG,EAChB,KAAC,MAAM,IAAC,QAAQ,EAAC,SAAS,uBAAgB,IAC1B,IACD,IACf,CACH;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,IAAC,mBAAmB,mBAClC,KAAC,MAAM,CAAC,KAAK,mCAAgC,EAC7C,KAAC,YAAY,KAAG,EAChB,KAAC,MAAM,CAAC,OAAO,cACd,KAAC,MAAM,CAAC,KAAK,KAAG,GACA,IACD,IACf,CACH;KACD;CACD,CAAC"}

package/dist/components/globalErrorFallback/GlobalErrorFallback.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '@a-type/ui';
+import { type BoxProps } from '../box/Box.js';
 export declare function GlobalErrorFallback({ children, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
 import { ButtonProps } from '@a-type/ui';
 export interface ReloadButtonProps extends ButtonProps {

package/dist/components/globalErrorFallback/GlobalErrorFallback.js

@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Heading, P } from '@a-type/ui';
 import { useLocalStorage } from '../../hooks.js';
+import { Box } from '../box/Box.js';
+import { Heading, P } from '../typography/typography.js';
 export function GlobalErrorFallback(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);
     const hadRecentError = useHadRecentError();

package/dist/components/globalErrorFallback/GlobalErrorFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalErrorFallback.js","sourceRoot":"","sources":["../../../src/components/globalErrorFallback/GlobalErrorFallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,GAAG,EAAY,OAAO,EAAE,CAAC,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,UAAU,mBAAmB,CAAC,EAA+B;QAA/B,EAAE,QAAQ,OAAqB,EAAhB,IAAI,cAAnB,YAAqB,CAAF;IACtD,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,OAAO,CACN,KAAC,GAAG,kBAAC,GAAG,QAAC,MAAM,EAAC,eAAe,EAAC,CAAC,UAAK,IAAI,cACzC,MAAC,GAAG,IACH,GAAG,QACH,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,QAAQ,EAChB,GAAG,QACH,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,aAElC,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAE,cAAM,qCAEhC,EACV,MAAC,CAAC,yDACsC,GAAG,EACzC,cAAc;4BACd,CAAC,CAAC,iGAAiG;4BACnG,CAAC,CAAC;kEAC0D,IAC1D,EACH,QAAQ,EACT,KAAC,YAAY,KAAG,IACX,IACD,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAe,IAAI,EAAE,MAAM,YAAY,CAAC;AAIvD,MAAM,UAAU,YAAY,CAAC,EAAwC;QAAxC,EAAE,OAAO,OAA+B,EAA1B,KAAK,cAAnB,WAAqB,CAAF;IAC/C,MAAM,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG,kBAAkB,EAAE,CAAC;IAErD,MAAM,OAAO,GAAG,GAAG,EAAE;QACpB,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACN,MAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;YACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;YACd,OAAO,EAAE,CAAC;QACX,CAAC,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,EACvB,qCAAoB,KACZ,CACT,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB;IAC1B,OAAO,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AACvB,MAAM,UAAU,iBAAiB;IAChC,MAAM,CAAC,eAAe,CAAC,GAAG,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;IAE3E,MAAM,cAAc,GACnB,eAAe,GAAG,GAAG,IAAI,eAAe,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;IAEjE,OAAO,cAAc,CAAC;AACvB,CAAC"}
+{"version":3,"file":"GlobalErrorFallback.js","sourceRoot":"","sources":["../../../src/components/globalErrorFallback/GlobalErrorFallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAiB,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,UAAU,mBAAmB,CAAC,EAA+B;QAA/B,EAAE,QAAQ,OAAqB,EAAhB,IAAI,cAAnB,YAAqB,CAAF;IACtD,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,OAAO,CACN,KAAC,GAAG,kBAAC,GAAG,QAAC,MAAM,EAAC,eAAe,EAAC,CAAC,UAAK,IAAI,cACzC,MAAC,GAAG,IACH,GAAG,QACH,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,QAAQ,EAChB,GAAG,QACH,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,aAElC,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAE,cAAM,qCAEhC,EACV,MAAC,CAAC,yDACsC,GAAG,EACzC,cAAc;4BACd,CAAC,CAAC,iGAAiG;4BACnG,CAAC,CAAC;kEAC0D,IAC1D,EACH,QAAQ,EACT,KAAC,YAAY,KAAG,IACX,IACD,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAe,IAAI,EAAE,MAAM,YAAY,CAAC;AAIvD,MAAM,UAAU,YAAY,CAAC,EAAwC;QAAxC,EAAE,OAAO,OAA+B,EAA1B,KAAK,cAAnB,WAAqB,CAAF;IAC/C,MAAM,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG,kBAAkB,EAAE,CAAC;IAErD,MAAM,OAAO,GAAG,GAAG,EAAE;QACpB,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACN,MAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;YACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;YACd,OAAO,EAAE,CAAC;QACX,CAAC,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,EACvB,qCAAoB,KACZ,CACT,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB;IAC1B,OAAO,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AACvB,MAAM,UAAU,iBAAiB;IAChC,MAAM,CAAC,eAAe,CAAC,GAAG,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;IAE3E,MAAM,cAAc,GACnB,eAAe,GAAG,GAAG,IAAI,eAAe,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;IAEjE,OAAO,cAAc,CAAC;AACvB,CAAC"}

package/dist/components/scrollArea/ScrollArea.module.css

@@ -4,6 +4,7 @@
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
+	touch-action: auto;
 }
 
 .viewport {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.1.18",
+  "version": "6.1.20",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -94,6 +94,7 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.0",
     "typescript-plugin-css-modules": "^5.2.0",
+    "vite": "^8.2.0",
     "vitest": "^4.0.18",
     "vitest-browser-react": "^2.0.4"
   },

package/src/components/drawer/Drawer.module.css

@@ -1,21 +1,38 @@
 .overlay {
+	--bleed: 3rem;
+	--swipe-opacity: 0.2;
+
 	position: fixed;
+	min-height: 100dvh;
 	inset: 0;
-	@apply --mx-shadow;
+
 	@apply --mx-bg(var(--m-gray-ink));
-	@apply --mx-bg-faded(5%);
+	opacity: calc(
+		0.2 + var(--swipe-opacity) * (1 - var(--drawer-swipe-progress, 0))
+	);
+
 	border-top: var(--m-lw) solid var(--m-gray);
-	transition: all var(--m-dur) var(--m-ease);
+
+	transition: all var(--m-dur-long) var(--m-ease);
+
 	backdrop-filter: blur(2px);
 
 	&[data-starting-style],
 	&[data-ending-style] {
 		opacity: 0;
 	}
+
+	&[data-swiping] {
+		transition-duration: 0ms;
+	}
+
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
 }
 
 .viewport {
-	--bleed: 100px;
+	--bleed: 3rem;
 
 	position: fixed;
 	inset: 0;
@@ -37,47 +54,60 @@
 	&[data-closed]::after {
 		opacity: 0;
 	}
+
+	/* While swiping, the popup's own bleed covers the bottom edge, so hide the
+     fixed fill — otherwise it paints white over the backdrop once the popup is
+     dragged far enough down. */
+	&:has([data-swiping])::after {
+		opacity: 0;
+	}
 }
 
 .popup {
+	--bleed: 3rem;
+	--top-gap: 1rem;
+
 	box-sizing: border-box;
 	position: relative;
 	z-index: 1;
 	max-width: unset;
 	width: 100%;
-	max-height: 85svh;
+	max-height: calc(100% - var(--top-gap) + var(--bleed));
+	height: calc(100% - var(--top-gap) + var(--bleed));
+	margin-bottom: calc(-1 * var(--bleed));
+	padding-bottom: max(
+		0px,
+		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
+	);
 
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
 
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-gray-heavy));
+
 	touch-action: none;
 
 	overflow: visible;
 
 	transition:
-		transform var(--m-dur) var(--m-ease),
-		opacity var(--m-dur) var(--m-ease);
+		transform var(--m-dur-long) var(--m-ease),
+		box-shadow var(--m-dur-long) var(--m-ease),
+		padding-bottom var(--m-dur-long) var(--m-ease);
 
 	--shadow-dir: -1;
 	@apply --mx-shadow;
 	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
 		var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
 
-	@apply --mx-bg(var(--m-surface-ambient-bg));
-	@apply --mx-borderColor(var(--m-gray-heavy));
-
 	border-radius: var(--m-surface-rd) var(--m-surface-rd) 0 0;
 	border-bottom-width: 0;
-	padding-bottom: max(
-		0px,
-		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
-	);
 
-	/* Use drawer's built-in swipe movement for animation */
 	transform: translateY(
 		calc(
-			var(--drawer-swipe-movement-y, 0px) + var(--drawer-snap-point-offset, 0px)
+			var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
+				var(--bleed)
 		)
 	);
 	will-change: transform;
@@ -85,32 +115,41 @@
 	/* Disable transitions while swiping so movement is immediate */
 	&[data-swiping] {
 		transition: none;
+		user-select: none;
 	}
 
 	&[data-starting-style],
 	&[data-ending-style] {
-		transform: translateY(100%);
+		transform: translateY(calc(100% - var(--bleed)));
 		padding-bottom: 0;
+		box-shadow: 0 0 0 transparent;
 	}
+
 	&[data-ending-style] {
-		transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		top: 100%;
+		height: var(--bleed);
+		background-color: inherit;
+		pointer-events: none;
 	}
 }
 
 .contentScrollArea {
-	width: 100%;
-	height: 100%;
 	flex: 1 1 auto;
 	min-height: 0;
 	overscroll-behavior: contain;
-}
-
-.contentScrollAreaContent {
+	touch-action: auto;
+	overflow-y: auto;
+	padding: var(--m-surface-p);
 	display: flex;
 	flex-direction: column;
 	gap: var(--m-sp-md);
-	padding: var(--m-surface-p);
-	overscroll-behavior: contain;
 }
 
 .swipeHandle {
@@ -160,7 +199,7 @@
 
 .actions {
 	position: sticky;
-	bottom: var(--m-sp-md);
+	bottom: 0;
 	z-index: 100;
 	display: flex;
 	flex-direction: row;
@@ -168,7 +207,6 @@
 	align-items: center;
 	justify-content: end;
 	align-self: end;
-	padding-bottom: --fn-literal(1px);
 	@apply --mx-shadow;
 	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
 		var(--m-shadow-md-spread) var(--m-gray-paper);
@@ -178,4 +216,20 @@
 	gap: var(--m-sp-sm);
 	border-radius: var(--m-surface-rd);
 	transition: bottom var(--m-dur) var(--m-ease);
+
+	/*
+		Hide the actions when the keyboard is open.
+		Done by moving them downward behind it.
+		This both fixes a bug with the positioning, and
+		gives the user more room to see.
+	*/
+	transform: translateY(calc(2 * var(--drawer-keyboard-inset, 0px)));
+	/*
+		Same but with modern CSS if()
+	*/
+	@supports (
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;)
+	) {
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;);
+	}
 }

package/src/components/drawer/Drawer.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button/index.js';
+import { Input } from '../input/Input.js';
 import { H1, P } from '../typography/index.js';
 import { Drawer } from './Drawer.js';
 
@@ -25,9 +26,49 @@ function DummyContent() {
 				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
 				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
 			</P>
-			<Button disabled color="primary">
-				Click me
-			</Button>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
 		</div>
 	);
 }

package/src/components/drawer/Drawer.tsx

@@ -13,10 +13,9 @@ import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
 import { useParticles } from '../particles/ParticleContext.js';
-import { ScrollArea } from '../scrollArea/ScrollArea.js';
 import cls from './Drawer.module.css';
 
-const DrawerOverlay = withClassName(BaseDrawer.Backdrop, cls.overlay);
+const DrawerBackdrop = withClassName(BaseDrawer.Backdrop, cls.overlay);
 
 const StyledPopup = withClassName(BaseDrawer.Popup, cls.popup);
 
@@ -81,23 +80,20 @@ const DrawerContent = function DrawerContent({
 	const finalRef = useMergedRef(ref, openRef);
 
 	return (
-		<BaseDrawer.Portal>
-			<DrawerOverlay />
-			<BaseDrawer.Viewport className={cls.viewport}>
-				<StyledPopup ref={finalRef} {...props} className={className}>
-					{!disableDefaultClose && <DrawerDefaultClose />}
-					<DrawerSwipeHandle />
-					<ScrollArea direction="vertical" className={cls.contentScrollArea}>
-						<ScrollArea.Content
-							className={clsx(cls.contentScrollAreaContent, innerClassName)}
-							style={{ minWidth: undefined }}
-						>
+		<BaseDrawer.VirtualKeyboardProvider>
+			<BaseDrawer.Portal>
+				<DrawerBackdrop data-role="backdrop" />
+				<BaseDrawer.Viewport className={cls.viewport}>
+					<StyledPopup ref={finalRef} {...props} className={className}>
+						{!disableDefaultClose && <DrawerDefaultClose />}
+						<DrawerSwipeHandle />
+						<div className={clsx(cls.contentScrollArea, innerClassName)}>
 							{children}
-						</ScrollArea.Content>
-					</ScrollArea>
-				</StyledPopup>
-			</BaseDrawer.Viewport>
-		</BaseDrawer.Portal>
+						</div>
+					</StyledPopup>
+				</BaseDrawer.Viewport>
+			</BaseDrawer.Portal>
+		</BaseDrawer.VirtualKeyboardProvider>
 	);
 };
 
@@ -142,27 +138,11 @@ const DrawerDescription = withClassName(
 );
 
 // TODO: support swipeDirection
-export interface DrawerProps
-	extends Omit<DrawerRootProps, 'children' | 'swipeDirection'> {
-	children: React.ReactNode;
-}
-const defaultSnapPoints = [0.75, 1];
-const DrawerRoot = ({
-	children,
-	defaultSnapPoint = 0.5,
-	snapPoints = defaultSnapPoints,
-	...props
-}: DrawerProps) => {
+export interface DrawerProps extends Omit<DrawerRootProps, 'swipeDirection'> {}
+const DrawerRoot = ({ children, ...props }: DrawerProps) => {
 	return (
-		<BaseDrawer.Root
-			swipeDirection="down"
-			defaultSnapPoint={defaultSnapPoint}
-			snapPoints={snapPoints}
-			{...props}
-		>
-			<BaseDrawer.VirtualKeyboardProvider>
-				{children}
-			</BaseDrawer.VirtualKeyboardProvider>
+		<BaseDrawer.Root swipeDirection="down" {...props}>
+			{children}
 		</BaseDrawer.Root>
 	);
 };

package/src/components/globalErrorFallback/GlobalErrorFallback.tsx

@@ -1,5 +1,6 @@
-import { Box, BoxProps, Heading, P } from '@a-type/ui';
 import { useLocalStorage } from '../../hooks.js';
+import { Box, type BoxProps } from '../box/Box.js';
+import { Heading, P } from '../typography/typography.js';
 
 export function GlobalErrorFallback({ children, ...rest }: BoxProps) {
 	const hadRecentError = useHadRecentError();

package/src/components/scrollArea/ScrollArea.module.css

@@ -4,6 +4,7 @@
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
+	touch-action: auto;
 }
 
 .viewport {