braid-design-system 34.1.0 → 34.2.0

package/dist/lib/components/private/Modal/ModalContent.d.cts

@@ -4,7 +4,7 @@ import { BoxProps } from "../../Box/Box.cjs";
 import { ReactNode, Ref } from "react";
 
 //#region src/lib/components/private/Modal/ModalContent.d.ts
-interface ModalContentProps {
+type ModalContentCommonProps = {
   id?: string;
   title: string;
   children: ReactNode;
@@ -12,13 +12,19 @@ interface ModalContentProps {
   closeLabel?: string;
   width: BoxProps['maxWidth'] | 'content';
   description?: ReactNodeNoStrings;
-  illustration?: ReactNodeNoStrings;
   position: 'center' | 'right' | 'left';
   headingLevel: '2' | '3';
   scrollLock?: boolean;
   headingRef?: Ref<HTMLElement>;
   modalRef?: Ref<HTMLElement>;
   data?: DataAttributeMap;
-}
+};
+type ModalContentProps = ModalContentCommonProps & ({
+  coverImage?: never;
+  illustration?: ReactNodeNoStrings;
+} | {
+  coverImage?: string;
+  illustration?: never;
+});
 //#endregion
 export { ModalContentProps };

package/dist/lib/components/private/Modal/ModalContent.d.mts

@@ -3,7 +3,7 @@ import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { BoxProps } from "../../Box/Box.mjs";
 import { ReactNode, Ref } from "react";
 //#region src/lib/components/private/Modal/ModalContent.d.ts
-interface ModalContentProps {
+type ModalContentCommonProps = {
   id?: string;
   title: string;
   children: ReactNode;
@@ -11,13 +11,19 @@ interface ModalContentProps {
   closeLabel?: string;
   width: BoxProps['maxWidth'] | 'content';
   description?: ReactNodeNoStrings;
-  illustration?: ReactNodeNoStrings;
   position: 'center' | 'right' | 'left';
   headingLevel: '2' | '3';
   scrollLock?: boolean;
   headingRef?: Ref<HTMLElement>;
   modalRef?: Ref<HTMLElement>;
   data?: DataAttributeMap;
-}
+};
+type ModalContentProps = ModalContentCommonProps & ({
+  coverImage?: never;
+  illustration?: ReactNodeNoStrings;
+} | {
+  coverImage?: string;
+  illustration?: never;
+});
 //#endregion
 export { ModalContentProps };

package/dist/lib/components/private/Modal/ModalContent.mjs

@@ -3,14 +3,18 @@ import { Box } from "../../Box/Box.mjs";
 import { Stack } from "../../Stack/Stack.mjs";
 import { useFallbackId } from "../../../hooks/useFallbackId.mjs";
 import { IconClear } from "../../icons/IconClear/IconClear.mjs";
+import { Column } from "../../Column/Column.mjs";
+import { Columns } from "../../Columns/Columns.mjs";
 import { Bleed } from "../../Bleed/Bleed.mjs";
 import { ButtonIcon } from "../../ButtonIcon/ButtonIcon.mjs";
 import { normalizeKey } from "../normalizeKey.mjs";
 import { Heading } from "../../Heading/Heading.mjs";
 import { pageBlockGutters } from "../../PageBlock/pageBlockGutters.mjs";
-import { closeIconOffset, headingRoot, maxSize, pointerEventsAll } from "./Modal.css.mjs";
-import { Fragment, forwardRef, useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollContainer } from "../ScrollContainer/ScrollContainer.mjs";
+import { closeIconOffset, coverImage, coverImageHeightLimit, coverImageVar, headingRoot, hideOverflowAboveMobile, maxSize, pointerEventsAll } from "./Modal.css.mjs";
+import { forwardRef, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { RemoveScroll } from "react-remove-scroll";
 
 //#region src/lib/components/private/Modal/ModalContent.tsx
@@ -18,48 +22,130 @@ const modalPadding = {
 	mobile: "gutter",
 	tablet: "large"
 };
-const ModalContentHeader = forwardRef(({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxs(Stack, {
-	space: headingLevel === "2" ? {
-		mobile: "small",
-		tablet: "medium"
-	} : "small",
-	children: [/* @__PURE__ */ jsx(Heading, {
-		level: headingLevel,
-		align: center ? "center" : void 0,
+const ModalContentHeader = forwardRef(({ title, headingLevel, description, descriptionId, illustration, reserveCloseArea }, ref) => {
+	const header = /* @__PURE__ */ jsxs(Stack, {
+		space: headingLevel === "2" ? {
+			mobile: "small",
+			tablet: "medium"
+		} : "small",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: headingLevel,
+			align: illustration ? "center" : void 0,
+			children: /* @__PURE__ */ jsx(Box, {
+				ref,
+				tabIndex: -1,
+				component: "span",
+				position: "relative",
+				outline: "focus",
+				borderRadius: "small",
+				className: headingRoot,
+				children: title
+			})
+		}), description ? /* @__PURE__ */ jsx(Box, {
+			id: descriptionId,
+			children: description
+		}) : null]
+	});
+	const resolvedLayout = illustration ? /* @__PURE__ */ jsxs(Stack, {
+		space: "medium",
+		align: "center",
+		children: [/* @__PURE__ */ jsx(Box, {
+			paddingX: "gutter",
+			children: illustration
+		}), header]
+	}) : header;
+	return reserveCloseArea && !illustration ? /* @__PURE__ */ jsxs(Box, {
+		display: "flex",
+		children: [/* @__PURE__ */ jsx(Box, {
+			width: "full",
+			minWidth: 0,
+			children: resolvedLayout
+		}), /* @__PURE__ */ jsx(Box, {
+			width: "touchable",
+			flexShrink: 0,
+			flexGrow: 0
+		})]
+	}) : resolvedLayout;
+});
+const ModalContentScrollLayout = ({ children, applyCoverImageHeightLimit, contentStartRef, coverImageEnabled, applyPageBlockGutters, applyFullHeight }) => /* @__PURE__ */ jsxs(ScrollContainer, {
+	direction: "vertical",
+	children: [coverImageEnabled && /* @__PURE__ */ jsx("span", { ref: contentStartRef }), /* @__PURE__ */ jsx(Box, {
+		className: applyCoverImageHeightLimit ? coverImageHeightLimit : void 0,
+		height: applyFullHeight ? "full" : void 0,
 		children: /* @__PURE__ */ jsx(Box, {
-			ref,
-			tabIndex: -1,
-			component: "span",
-			position: "relative",
-			outline: "focus",
-			borderRadius: "small",
-			className: headingRoot,
-			children: title
+			display: "flex",
+			gap: "large",
+			flexDirection: "column",
+			height: applyFullHeight ? "full" : void 0,
+			paddingY: modalPadding,
+			paddingX: applyPageBlockGutters ? pageBlockGutters : modalPadding,
+			children
+		})
+	})]
+});
+const ModalCoverImageLayout = ({ width, image, children }) => {
+	const forceStack = width === "xsmall";
+	const coverImage$1 = /* @__PURE__ */ jsx(Box, {
+		position: "relative",
+		height: "full",
+		children: /* @__PURE__ */ jsx(Box, {
+			position: { tablet: forceStack ? void 0 : "absolute" },
+			inset: 0,
+			className: coverImage,
+			width: "full",
+			height: "full",
+			style: assignInlineVars({ [coverImageVar]: `url(${image})` })
 		})
-	}), description ? /* @__PURE__ */ jsx(Box, {
-		id: descriptionId,
-		children: description
-	}) : null]
-}));
-const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, title, headingRef: headingRefProp, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, ...restProps }) => {
+	});
+	return forceStack ? /* @__PURE__ */ jsxs(Stack, {
+		space: "none",
+		children: [coverImage$1, /* @__PURE__ */ jsx(Fragment$1, { children })]
+	}) : /* @__PURE__ */ jsxs(Columns, {
+		space: "none",
+		collapseBelow: "tablet",
+		reverse: true,
+		children: [/* @__PURE__ */ jsx(Column, { children: coverImage$1 }), /* @__PURE__ */ jsx(Column, { children })]
+	});
+};
+const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, coverImage, title, headingRef: headingRefProp, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, ...restProps }) => {
 	const resolvedId = useFallbackId(id);
 	const descriptionId = useId();
 	const defaultModalRef = useRef(null);
 	const modalRef = modalRefProp || defaultModalRef;
 	const defaultHeadingRef = useRef(null);
 	const headingRef = headingRefProp || defaultHeadingRef;
+	const contentStartRef = useRef(null);
 	const handleEscape = (event) => {
 		if (normalizeKey(event) === "Escape") {
 			event.stopPropagation();
 			onClose();
 		}
 	};
+	const isDrawer = position === "left" || position === "right";
+	const coverImageEnabled = Boolean(coverImage) && !isDrawer;
+	const allowColumnLayout = coverImageEnabled && width !== "xsmall";
 	const justifyContent = {
 		left: "flexStart",
 		center: "center",
 		right: "flexEnd"
 	}[position];
-	const modalRadius = position === "center" ? "xlarge" : void 0;
+	const modalRadius = !isDrawer ? "xlarge" : void 0;
+	const modalLayout = /* @__PURE__ */ jsxs(ModalContentScrollLayout, {
+		applyCoverImageHeightLimit: allowColumnLayout,
+		applyPageBlockGutters: isDrawer,
+		applyFullHeight: isDrawer,
+		contentStartRef,
+		coverImageEnabled,
+		children: [/* @__PURE__ */ jsx(ModalContentHeader, {
+			title,
+			headingLevel,
+			description,
+			descriptionId,
+			illustration: illustration && !coverImageEnabled ? illustration : void 0,
+			ref: headingRef,
+			reserveCloseArea: true
+		}), children]
+	});
 	return /* @__PURE__ */ jsx(Box, {
 		role: "dialog",
 		"aria-label": title,
@@ -69,7 +155,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		onKeyDown: handleEscape,
 		position: "relative",
 		width: "full",
-		height: "full",
+		height: isDrawer ? "full" : void 0,
 		display: "flex",
 		alignItems: "center",
 		textAlign: "left",
@@ -80,8 +166,8 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 			display: "flex",
 			alignItems: "center",
 			justifyContent,
-			height: position === "right" || position === "left" ? "full" : void 0,
-			overflow: position !== "center" ? "hidden" : void 0,
+			height: isDrawer ? "full" : void 0,
+			overflow: "hidden",
 			boxShadow: "large",
 			borderRadius: modalRadius,
 			width: width !== "content" ? "full" : void 0,
@@ -90,7 +176,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				noRelative: true,
 				forwardProps: true,
 				enabled: scrollLock,
-				children: /* @__PURE__ */ jsxs(Box, {
+				children: /* @__PURE__ */ jsx(Box, {
 					display: "flex",
 					gap: "large",
 					flexDirection: "column",
@@ -99,47 +185,25 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 					overflow: "auto",
 					position: "relative",
 					width: width !== "content" ? "full" : void 0,
-					height: position === "right" || position === "left" ? "full" : void 0,
-					paddingY: modalPadding,
-					paddingX: position !== "center" ? pageBlockGutters : modalPadding,
-					className: [pointerEventsAll, position === "center" && maxSize[position]],
+					height: isDrawer ? "full" : void 0,
+					className: {
+						[pointerEventsAll]: true,
+						[maxSize[position]]: !isDrawer,
+						[hideOverflowAboveMobile]: allowColumnLayout
+					},
 					...buildDataAttributes_default({
 						data,
 						validateRestProps: restProps
 					}),
-					children: [illustration ? /* @__PURE__ */ jsxs(Stack, {
-						space: "medium",
-						align: "center",
-						children: [/* @__PURE__ */ jsx(Box, {
-							paddingX: "gutter",
-							children: illustration
-						}), /* @__PURE__ */ jsx(ModalContentHeader, {
-							title,
-							headingLevel,
-							description,
-							descriptionId,
-							center: Boolean(illustration),
-							ref: headingRef
-						})]
-					}) : /* @__PURE__ */ jsxs(Box, {
-						display: "flex",
-						children: [/* @__PURE__ */ jsx(Box, {
-							width: "full",
-							minWidth: 0,
-							children: /* @__PURE__ */ jsx(ModalContentHeader, {
-								title,
-								headingLevel,
-								description,
-								descriptionId,
-								center: Boolean(illustration),
-								ref: headingRef
-							})
-						}), /* @__PURE__ */ jsx(Box, {
-							width: "touchable",
-							flexShrink: 0,
-							flexGrow: 0
-						})]
-					}), /* @__PURE__ */ jsx(Fragment, { children })]
+					children: /* @__PURE__ */ jsx(ScrollContainer, {
+						direction: "vertical",
+						startRef: contentStartRef,
+						children: coverImageEnabled && coverImage ? /* @__PURE__ */ jsx(ModalCoverImageLayout, {
+							width,
+							image: coverImage,
+							children: modalLayout
+						}) : modalLayout
+					})
 				})
 			}), /* @__PURE__ */ jsx(Box, {
 				position: "absolute",
@@ -150,10 +214,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				display: "flex",
 				justifyContent: "flexEnd",
 				paddingTop: modalPadding,
-				paddingRight: position !== "center" ? pageBlockGutters : modalPadding,
-				className: position === "center" && maxSize[position],
+				paddingRight: isDrawer ? pageBlockGutters : modalPadding,
+				className: !isDrawer && maxSize[position],
 				children: /* @__PURE__ */ jsx(Bleed, {
 					space: "xsmall",
+					horizontal: "xxsmall",
 					children: /* @__PURE__ */ jsx(Box, {
 						position: "relative",
 						background: "surface",
@@ -164,7 +229,6 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 							label: closeLabel,
 							icon: /* @__PURE__ */ jsx(IconClear, { tone: "secondary" }),
 							variant: "transparent",
-							size: "large",
 							onClick: onClose
 						})
 					})

package/dist/lib/components/private/ScrollContainer/ScrollContainer.cjs

@@ -3,36 +3,55 @@ const require_buildDataAttributes = require('../buildDataAttributes.cjs');
 const require_Box = require('../../Box/Box.cjs');
 const require_useIsomorphicLayoutEffect = require('../../../hooks/useIsomorphicLayoutEffect.cjs');
 const require_ScrollContainer_css = require('./ScrollContainer.css.cjs');
+const require_scrollbars_css = require('../scrollbars.css.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let throttle_debounce = require("throttle-debounce");
 
 //#region src/lib/components/private/ScrollContainer/ScrollContainer.tsx
 const scrollOffset = 2;
-const maskOverflow = (element, direction) => setTimeout(() => {
+const maskOverflow = ({ element, direction, gateStart }) => setTimeout(() => {
 	const atTop = element.scrollTop <= 0;
 	const atBottom = element.scrollHeight - element.offsetHeight - element.scrollTop < scrollOffset;
 	const atLeft = element.scrollLeft <= 0;
 	const atRight = element.scrollWidth - element.offsetWidth - element.scrollLeft < scrollOffset;
 	if (direction === "vertical" || direction === "all") {
-		element.classList[atTop ? "remove" : "add"](require_ScrollContainer_css.maskTop);
+		element.classList[atTop || gateStart ? "remove" : "add"](require_ScrollContainer_css.maskTop);
 		element.classList[atBottom ? "remove" : "add"](require_ScrollContainer_css.maskBottom);
 	}
 	if (direction === "horizontal" || direction === "all") {
-		element.classList[atLeft ? "remove" : "add"](require_ScrollContainer_css.maskLeft);
+		element.classList[atLeft || gateStart ? "remove" : "add"](require_ScrollContainer_css.maskLeft);
 		element.classList[atRight ? "remove" : "add"](require_ScrollContainer_css.maskRight);
 	}
 });
-const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, data, ...restProps }) => {
+const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, startRef, data, ...restProps }) => {
 	const containerRef = (0, react.useRef)(null);
+	const gateStartRef = (0, react.useRef)(Boolean(startRef?.current));
 	const updateMask = (0, throttle_debounce.throttle)(100, (0, react.useCallback)(() => {
-		if (containerRef.current) maskOverflow(containerRef.current, direction$1);
+		if (containerRef.current) maskOverflow({
+			element: containerRef.current,
+			direction: direction$1,
+			gateStart: gateStartRef.current
+		});
 	}, [containerRef, direction$1]));
 	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
 		if (containerRef.current) updateMask();
 		window.addEventListener("resize", updateMask);
 		return () => window.removeEventListener("resize", updateMask);
 	}, [updateMask]);
+	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+		if (!startRef?.current || !containerRef.current) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry.rootBounds) return;
+			gateStartRef.current = !(direction$1 === "horizontal" || direction$1 === "all" ? entry.boundingClientRect.left < entry.rootBounds.left : entry.boundingClientRect.top < entry.rootBounds.top);
+			updateMask();
+		}, {
+			root: containerRef.current,
+			threshold: [0, 1]
+		});
+		observer.observe(startRef.current);
+		return () => observer.disconnect();
+	}, [startRef, updateMask]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		ref: containerRef,
 		onScroll: updateMask,
@@ -41,7 +60,7 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		className: [
 			require_ScrollContainer_css.container,
 			require_ScrollContainer_css.mask,
-			hideScrollbar$1 ? require_ScrollContainer_css.hideScrollbar : null,
+			hideScrollbar$1 ? require_ScrollContainer_css.hideScrollbar : require_scrollbars_css.scrollbars,
 			require_ScrollContainer_css.fadeSize[fadeSize$1],
 			require_ScrollContainer_css.direction[direction$1]
 		],

package/dist/lib/components/private/ScrollContainer/ScrollContainer.css.cjs

@@ -39,12 +39,20 @@ const left = (0, _vanilla_extract_css.createVar)("left");
 const right = (0, _vanilla_extract_css.createVar)("right");
 const top = (0, _vanilla_extract_css.createVar)("top");
 const bottom = (0, _vanilla_extract_css.createVar)("bottom");
-const mask = (0, _vanilla_extract_css.style)({ maskImage: [
-	`linear-gradient(to bottom, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(top, "0")})`,
-	`linear-gradient(to right, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(left, "0")})`,
-	`linear-gradient(to left, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(right, "0")})`,
-	`linear-gradient(to top, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(bottom, "0")})`
-].join(",") }, "mask");
+const mask = (0, _vanilla_extract_css.style)({
+	vars: {
+		[left]: "0",
+		[right]: "0",
+		[top]: "0",
+		[bottom]: "0"
+	},
+	maskImage: [
+		`linear-gradient(to bottom, transparent 0, black ${top})`,
+		`linear-gradient(to right, transparent 0, black ${left})`,
+		`linear-gradient(to left, transparent 0, black ${right})`,
+		`linear-gradient(to top, transparent 0, black ${bottom})`
+	].join(",")
+}, "mask");
 const maskLeft = (0, _vanilla_extract_css.style)({ vars: { [left]: scrollOverlaySize } }, "maskLeft");
 const maskRight = (0, _vanilla_extract_css.style)({ vars: { [right]: scrollOverlaySize } }, "maskRight");
 const maskTop = (0, _vanilla_extract_css.style)({ vars: { [top]: scrollOverlaySize } }, "maskTop");

package/dist/lib/components/private/ScrollContainer/ScrollContainer.css.mjs

@@ -1,5 +1,5 @@
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar, fallbackVar, style, styleVariants } from "@vanilla-extract/css";
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
 
 //#region src/lib/components/private/ScrollContainer/ScrollContainer.css.ts
 setFileScope("src/lib/components/private/ScrollContainer/ScrollContainer.css.ts", "braid-design-system");
@@ -38,12 +38,20 @@ const left = createVar("left");
 const right = createVar("right");
 const top = createVar("top");
 const bottom = createVar("bottom");
-const mask = style({ maskImage: [
-	`linear-gradient(to bottom, transparent 0, black ${fallbackVar(top, "0")})`,
-	`linear-gradient(to right, transparent 0, black ${fallbackVar(left, "0")})`,
-	`linear-gradient(to left, transparent 0, black ${fallbackVar(right, "0")})`,
-	`linear-gradient(to top, transparent 0, black ${fallbackVar(bottom, "0")})`
-].join(",") }, "mask");
+const mask = style({
+	vars: {
+		[left]: "0",
+		[right]: "0",
+		[top]: "0",
+		[bottom]: "0"
+	},
+	maskImage: [
+		`linear-gradient(to bottom, transparent 0, black ${top})`,
+		`linear-gradient(to right, transparent 0, black ${left})`,
+		`linear-gradient(to left, transparent 0, black ${right})`,
+		`linear-gradient(to top, transparent 0, black ${bottom})`
+	].join(",")
+}, "mask");
 const maskLeft = style({ vars: { [left]: scrollOverlaySize } }, "maskLeft");
 const maskRight = style({ vars: { [right]: scrollOverlaySize } }, "maskRight");
 const maskTop = style({ vars: { [top]: scrollOverlaySize } }, "maskTop");

package/dist/lib/components/private/ScrollContainer/ScrollContainer.mjs

@@ -2,36 +2,55 @@ import buildDataAttributes_default from "../buildDataAttributes.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect.mjs";
 import { container, direction, fadeSize, hideScrollbar, mask, maskBottom, maskLeft, maskRight, maskTop } from "./ScrollContainer.css.mjs";
+import { scrollbars } from "../scrollbars.css.mjs";
 import { useCallback, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { throttle } from "throttle-debounce";
 
 //#region src/lib/components/private/ScrollContainer/ScrollContainer.tsx
 const scrollOffset = 2;
-const maskOverflow = (element, direction) => setTimeout(() => {
+const maskOverflow = ({ element, direction, gateStart }) => setTimeout(() => {
 	const atTop = element.scrollTop <= 0;
 	const atBottom = element.scrollHeight - element.offsetHeight - element.scrollTop < scrollOffset;
 	const atLeft = element.scrollLeft <= 0;
 	const atRight = element.scrollWidth - element.offsetWidth - element.scrollLeft < scrollOffset;
 	if (direction === "vertical" || direction === "all") {
-		element.classList[atTop ? "remove" : "add"](maskTop);
+		element.classList[atTop || gateStart ? "remove" : "add"](maskTop);
 		element.classList[atBottom ? "remove" : "add"](maskBottom);
 	}
 	if (direction === "horizontal" || direction === "all") {
-		element.classList[atLeft ? "remove" : "add"](maskLeft);
+		element.classList[atLeft || gateStart ? "remove" : "add"](maskLeft);
 		element.classList[atRight ? "remove" : "add"](maskRight);
 	}
 });
-const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, data, ...restProps }) => {
+const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, startRef, data, ...restProps }) => {
 	const containerRef = useRef(null);
+	const gateStartRef = useRef(Boolean(startRef?.current));
 	const updateMask = throttle(100, useCallback(() => {
-		if (containerRef.current) maskOverflow(containerRef.current, direction$1);
+		if (containerRef.current) maskOverflow({
+			element: containerRef.current,
+			direction: direction$1,
+			gateStart: gateStartRef.current
+		});
 	}, [containerRef, direction$1]));
 	useIsomorphicLayoutEffect(() => {
 		if (containerRef.current) updateMask();
 		window.addEventListener("resize", updateMask);
 		return () => window.removeEventListener("resize", updateMask);
 	}, [updateMask]);
+	useIsomorphicLayoutEffect(() => {
+		if (!startRef?.current || !containerRef.current) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry.rootBounds) return;
+			gateStartRef.current = !(direction$1 === "horizontal" || direction$1 === "all" ? entry.boundingClientRect.left < entry.rootBounds.left : entry.boundingClientRect.top < entry.rootBounds.top);
+			updateMask();
+		}, {
+			root: containerRef.current,
+			threshold: [0, 1]
+		});
+		observer.observe(startRef.current);
+		return () => observer.disconnect();
+	}, [startRef, updateMask]);
 	return /* @__PURE__ */ jsx(Box, {
 		ref: containerRef,
 		onScroll: updateMask,
@@ -40,7 +59,7 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		className: [
 			container,
 			mask,
-			hideScrollbar$1 ? hideScrollbar : null,
+			hideScrollbar$1 ? hideScrollbar : scrollbars,
 			fadeSize[fadeSize$1],
 			direction[direction$1]
 		],

package/dist/lib/components/private/scrollbars.css.cjs

@@ -0,0 +1,27 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_colorModeStyle = require('../../css/colorModeStyle.cjs');
+let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+
+//#region src/lib/components/private/scrollbars.css.ts
+(0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/scrollbars.css.ts", "braid-design-system");
+const thumbColor = (0, _vanilla_extract_css.createVar)("thumbColor");
+const trackColor = "transparent";
+const scrollbars = (0, _vanilla_extract_css.style)([require_colorModeStyle.colorModeStyle({
+	lightMode: { vars: { [thumbColor]: "rgba(0 0 0 / 0.4)" } },
+	darkMode: { vars: { [thumbColor]: "rgba(255 255 255 / 0.4)" } }
+}), {
+	scrollbarColor: `${thumbColor} ${trackColor}`,
+	"@supports": { "not (scrollbar-color: auto)": { selectors: {
+		"&::-webkit-scrollbar": {
+			background: trackColor,
+			width: 8,
+			height: 8
+		},
+		"&::-webkit-scrollbar-thumb": { background: thumbColor }
+	} } }
+}], "scrollbars");
+(0, _vanilla_extract_css_fileScope.endFileScope)();
+
+//#endregion
+exports.scrollbars = scrollbars;

package/dist/lib/components/private/scrollbars.css.mjs

@@ -0,0 +1,26 @@
+import { colorModeStyle } from "../../css/colorModeStyle.mjs";
+import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, style } from "@vanilla-extract/css";
+
+//#region src/lib/components/private/scrollbars.css.ts
+setFileScope("src/lib/components/private/scrollbars.css.ts", "braid-design-system");
+const thumbColor = createVar("thumbColor");
+const trackColor = "transparent";
+const scrollbars = style([colorModeStyle({
+	lightMode: { vars: { [thumbColor]: "rgba(0 0 0 / 0.4)" } },
+	darkMode: { vars: { [thumbColor]: "rgba(255 255 255 / 0.4)" } }
+}), {
+	scrollbarColor: `${thumbColor} ${trackColor}`,
+	"@supports": { "not (scrollbar-color: auto)": { selectors: {
+		"&::-webkit-scrollbar": {
+			background: trackColor,
+			width: 8,
+			height: 8
+		},
+		"&::-webkit-scrollbar-thumb": { background: thumbColor }
+	} } }
+}], "scrollbars");
+endFileScope();
+
+//#endregion
+export { scrollbars };

package/dist/lib/playroom/snippets/BrandedContainer.cjs

@@ -0,0 +1,16 @@
+
+//#region src/lib/playroom/snippets/BrandedContainer.ts
+const snippets = [{
+	group: "Sections",
+	name: "Branded container",
+	description: "Full bleed",
+	code: "<Box background=\"brand\" paddingY=\"xlarge\">\n  <PageBlock width=\"medium\">\n    <Stack space=\"large\">\n      <Heading level=\"2\">Heading</Heading>\n\n      <Text>\n        Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n        <Strong>large Stack</Strong> spacing content groups within the section.\n        <br />\n        Uses a <Strong>PageBlock</Strong> inside the section to maintain screen\n        gutters on small screens.\n      </Text>\n\n      <Text>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n        cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n        egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed\n        tempus magna. Duis a malesuada diam.\n      </Text>\n    </Stack>\n  </PageBlock>\n</Box>"
+}, {
+	group: "Sections",
+	name: "Branded container",
+	description: "Rounded from desktop (full bleed below)",
+	code: "<Box paddingX={{ desktop: \"gutter\" }}>\n  <ContentBlock width=\"large\">\n    <Box\n      background=\"brand\"\n      paddingY=\"xlarge\"\n      borderRadius={{ desktop: \"xlarge\" }}\n    >\n      <PageBlock width=\"medium\">\n        <Stack space=\"large\">\n          <Heading level=\"2\">Heading</Heading>\n\n          <Text>\n            Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n            <Strong>large Stack</Strong> spacing content groups within the\n            section.\n            <br />\n            Uses a <Strong>PageBlock</Strong> inside the section to maintain\n            screen gutters on small screens.\n          </Text>\n\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In\n            convallis cursus quam nec volutpat. In hac habitasse platea\n            dictumst. Praesent egestas erat id mollis imperdiet. Vestibulum non\n            commodo nisi, sed tempus magna. Duis a malesuada diam.\n          </Text>\n        </Stack>\n      </PageBlock>\n    </Box>\n  </ContentBlock>\n</Box>"
+}];
+
+//#endregion
+exports.snippets = snippets;

package/dist/lib/playroom/snippets/BrandedContainer.mjs

@@ -0,0 +1,15 @@
+//#region src/lib/playroom/snippets/BrandedContainer.ts
+const snippets = [{
+	group: "Sections",
+	name: "Branded container",
+	description: "Full bleed",
+	code: "<Box background=\"brand\" paddingY=\"xlarge\">\n  <PageBlock width=\"medium\">\n    <Stack space=\"large\">\n      <Heading level=\"2\">Heading</Heading>\n\n      <Text>\n        Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n        <Strong>large Stack</Strong> spacing content groups within the section.\n        <br />\n        Uses a <Strong>PageBlock</Strong> inside the section to maintain screen\n        gutters on small screens.\n      </Text>\n\n      <Text>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n        cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n        egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed\n        tempus magna. Duis a malesuada diam.\n      </Text>\n    </Stack>\n  </PageBlock>\n</Box>"
+}, {
+	group: "Sections",
+	name: "Branded container",
+	description: "Rounded from desktop (full bleed below)",
+	code: "<Box paddingX={{ desktop: \"gutter\" }}>\n  <ContentBlock width=\"large\">\n    <Box\n      background=\"brand\"\n      paddingY=\"xlarge\"\n      borderRadius={{ desktop: \"xlarge\" }}\n    >\n      <PageBlock width=\"medium\">\n        <Stack space=\"large\">\n          <Heading level=\"2\">Heading</Heading>\n\n          <Text>\n            Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n            <Strong>large Stack</Strong> spacing content groups within the\n            section.\n            <br />\n            Uses a <Strong>PageBlock</Strong> inside the section to maintain\n            screen gutters on small screens.\n          </Text>\n\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In\n            convallis cursus quam nec volutpat. In hac habitasse platea\n            dictumst. Praesent egestas erat id mollis imperdiet. Vestibulum non\n            commodo nisi, sed tempus magna. Duis a malesuada diam.\n          </Text>\n        </Stack>\n      </PageBlock>\n    </Box>\n  </ContentBlock>\n</Box>"
+}];
+
+//#endregion
+export { snippets };