braid-design-system 34.9.0 → 34.10.0

package/dist/lib/components/Accordion/AccordionItem.d.mts

@@ -14,6 +14,11 @@ interface AccordionItemBaseProps {
   icon?: TextProps['icon'];
   data?: DataAttributeMap;
   badge?: ReactElement<BadgeProps> | null;
+  /**
+   * Key used when Accordion owns the open items.
+   * Required when `multiple` is `false`, or when `value`, `defaultValue`, or `onChange` is set on Accordion.
+   */
+  value?: string;
 }
 type AccordionItemProps = AccordionItemBaseProps & UseDisclosureProps;
 type AccordionItemStateProps = DisclosureStateProps;

package/dist/lib/components/Accordion/AccordionItem.mjs

@@ -1,16 +1,16 @@
 import buildDataAttributes_default from "../private/buildDataAttributes.mjs";
 import { Box } from "../Box/Box.mjs";
-import { Stack } from "../Stack/Stack.mjs";
 import { AccordionContext, validTones } from "./AccordionContext.mjs";
 import "./Accordion.mjs";
+import { useFallbackId } from "../../hooks/useFallbackId.mjs";
 import { useDisclosure } from "../Disclosure/useDisclosure.mjs";
 import { Spread } from "../Spread/Spread.mjs";
 import { Text } from "../Text/Text.mjs";
 import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
 import { badgeSlotSpace } from "../private/badgeSlotSpace.mjs";
-import { button, focusRing } from "./AccordionItem.css.mjs";
+import { button, content, contentClosed, contentOpen, focusRing } from "./AccordionItem.css.mjs";
 import assert from "assert";
-import { cloneElement, useContext } from "react";
+import { cloneElement, useCallback, useContext, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/components/Accordion/AccordionItem.tsx
 const itemSpaceForSize = {
@@ -19,12 +19,21 @@ const itemSpaceForSize = {
 	standard: "medium",
 	large: "medium"
 };
-const AccordionItem = ({ id, label, children, badge, size: sizeProp, tone: toneProp, weight: weightProp, icon, data, ...restProps }) => {
+const minDurationMs = 200;
+const maxDurationMs = 500;
+const pixelsPerSecond = 320;
+const durationMsForHeight = (height) => Math.round(Math.min(maxDurationMs, Math.max(minDurationMs, height / pixelsPerSecond * 1e3)));
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const isHeightTransition = (event) => event.propertyName === "height" && event.target === event.currentTarget;
+const AccordionItem = ({ id, value, label, children, badge, size: sizeProp, tone: toneProp, weight: weightProp, icon, data, expanded: expandedProp, onToggle, ...restProps }) => {
 	const accordionContext = useContext(AccordionContext);
+	const managed = Boolean(accordionContext?.managed);
 	assert(!(accordionContext && sizeProp), "Size cannot be set on AccordionItem when inside Accordion. Size should be set on Accordion instead.");
 	assert(!(accordionContext && toneProp), "Tone cannot be set on AccordionItem when inside Accordion. Tone should be set on Accordion instead.");
 	assert(!(accordionContext && weightProp), "Weight cannot be set on AccordionItem when inside Accordion. Weight should be set on Accordion instead.");
-	assert(toneProp === void 0 || validTones.includes(toneProp), `The 'tone' prop should be one of the following: ${validTones.map((x) => `"${x}"`).join(", ")}`);
+	assert(toneProp === void 0 || validTones.includes(toneProp), `The 'tone' prop should be one of the following: ${validTones.map((tone) => `"${tone}"`).join(", ")}`);
+	assert(!managed || typeof value === "string" && value.length > 0, "AccordionItem 'value' must be a non-empty string when Accordion controls which items are open.");
+	assert(!(managed && expandedProp !== void 0), "expanded cannot be set on AccordionItem when Accordion controls which items are open. Use 'value' and 'onChange' on Accordion.");
 	assert(!badge || badge.type.__isBadge__, `AccordionItem badge prop can only be an instance of Badge. e.g. <AccordionItem badge={<Badge>New</Badge>}>`);
 	assert(!badge || badge.props.bleedY === void 0, "Badge elements cannot set the 'bleedY' prop when passed to an AccordionItem component");
 	assert(!icon || icon.props.size === void 0 && icon.props.tone === void 0, "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component");
@@ -32,14 +41,64 @@ const AccordionItem = ({ id, label, children, badge, size: sizeProp, tone: toneP
 	const tone = accordionContext?.tone ?? toneProp ?? "neutral";
 	const weight = accordionContext?.weight ?? weightProp ?? "medium";
 	const itemSpace = itemSpaceForSize[size] ?? "none";
+	const contentRef = useRef(null);
+	const contentSizeRef = useRef(null);
 	assert(typeof label === "undefined" || typeof label === "string", "Label must be a string");
+	const resolvedId = useFallbackId(id);
+	let disclosureState = { onToggle };
+	if (managed && accordionContext && value) disclosureState = {
+		expanded: accordionContext.openValues.includes(value),
+		onToggle: (nextExpanded) => {
+			accordionContext.toggleValue(value);
+			onToggle?.(nextExpanded);
+		}
+	};
+	else if (expandedProp !== void 0) disclosureState = {
+		expanded: expandedProp,
+		onToggle
+	};
 	const { expanded, buttonProps, contentProps } = useDisclosure({
-		id,
-		...restProps.expanded !== void 0 ? {
-			onToggle: restProps.onToggle,
-			expanded: restProps.expanded
-		} : { onToggle: restProps.onToggle }
+		id: resolvedId,
+		...disclosureState
 	});
+	const [trackedExpanded, setTrackedExpanded] = useState(expanded);
+	const [animatedHeight, setAnimatedHeight] = useState(null);
+	const [animationDurationMs, setAnimationDurationMs] = useState(minDurationMs);
+	const isAnimating = animatedHeight !== null;
+	if (expanded !== trackedExpanded) {
+		setTrackedExpanded(expanded);
+		if (prefersReducedMotion()) setAnimatedHeight(null);
+		else {
+			const height = contentSizeRef.current?.scrollHeight ?? 0;
+			setAnimatedHeight(height);
+			setAnimationDurationMs(durationMsForHeight(height));
+		}
+	}
+	const finishAnimation = useCallback(() => {
+		setAnimatedHeight(null);
+	}, []);
+	const finishHeightTransition = useCallback((event) => {
+		if (isHeightTransition(event)) finishAnimation();
+	}, [finishAnimation]);
+	useLayoutEffect(() => {
+		contentRef.current?.toggleAttribute("inert", !expanded);
+	}, [expanded]);
+	useLayoutEffect(() => {
+		if (!isAnimating) return;
+		if (!expanded) {
+			contentRef.current?.getBoundingClientRect();
+			setAnimatedHeight(0);
+		}
+		const timeoutId = window.setTimeout(finishAnimation, animationDurationMs + 50);
+		return () => {
+			window.clearTimeout(timeoutId);
+		};
+	}, [
+		animationDurationMs,
+		expanded,
+		finishAnimation,
+		isAnimating
+	]);
 	if (process.env.NODE_ENV !== "production")
  /**
 	* Validate that consumers are not passing `data-*`props,
@@ -49,8 +108,7 @@ const AccordionItem = ({ id, label, children, badge, size: sizeProp, tone: toneP
 		data,
 		validateRestProps: restProps
 	});
-	return /* @__PURE__ */ jsxs(Stack, {
-		space: itemSpace,
+	return /* @__PURE__ */ jsxs(Box, {
 		data,
 		children: [/* @__PURE__ */ jsx(Box, {
 			position: "relative",
@@ -89,9 +147,25 @@ const AccordionItem = ({ id, label, children, badge, size: sizeProp, tone: toneP
 				})
 			})
 		}), /* @__PURE__ */ jsx(Box, {
-			display: expanded ? "block" : "none",
+			className: {
+				[content]: true,
+				[contentOpen]: expanded && !isAnimating,
+				[contentClosed]: !expanded && !isAnimating
+			},
+			style: isAnimating ? {
+				height: animatedHeight,
+				transitionDuration: `${animationDurationMs}ms`
+			} : void 0,
+			onTransitionEnd: finishHeightTransition,
+			onTransitionCancel: finishHeightTransition,
+			"aria-hidden": expanded ? void 0 : true,
+			ref: contentRef,
 			...contentProps,
-			children
+			children: /* @__PURE__ */ jsx(Box, {
+				ref: contentSizeRef,
+				paddingTop: itemSpace,
+				children
+			})
 		})]
 	});
 };

package/dist/lib/components/Accordion/AccordionItem.playroom.cjs

@@ -1,12 +1,16 @@
+const require_AccordionContext = require("./AccordionContext.cjs");
 const require_AccordionItem = require("./AccordionItem.cjs");
 const require_playroomState = require("../../playroom/playroomState.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/Accordion/AccordionItem.playroom.tsx
-const AccordionItem = ({ label, stateName, expanded, onToggle, size, tone, weight, badge, icon, ...restProps }) => {
+const AccordionItem = ({ label, stateName, expanded, onToggle, size, tone, weight, badge, icon, value, ...restProps }) => {
+	const managed = Boolean((0, react.useContext)(require_AccordionContext.AccordionContext)?.managed);
 	const [state, handleChange] = require_playroomState.useFallbackState(stateName, expanded, onToggle, false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionItem.AccordionItem, {
-		expanded: state,
+		value: typeof value === "string" ? value : void 0,
 		onToggle: handleChange,
+		expanded: managed ? void 0 : state,
 		label: typeof label !== "boolean" ? label : "",
 		size: typeof size === "boolean" ? void 0 : size,
 		tone: typeof tone === "boolean" ? void 0 : tone,

package/dist/lib/components/Accordion/AccordionItem.playroom.d.cts

@@ -3,7 +3,7 @@ import { StateProp } from "../../playroom/playroomState.cjs";
 import { FC } from "react";
 //#region src/lib/components/Accordion/AccordionItem.playroom.d.ts
 type OptionalProps = 'id';
-type PlayroomAccordionItemProps = StateProp & AccordionItemBaseProps & AccordionItemStateProps & Partial<Pick<AccordionItemProps, OptionalProps>>;
+type PlayroomAccordionItemProps = StateProp & AccordionItemBaseProps & AccordionItemStateProps & Partial<Pick<AccordionItemProps, OptionalProps | 'value'>>;
 declare const AccordionItem: FC<PlayroomAccordionItemProps>;
 //#endregion
 export { AccordionItem };

package/dist/lib/components/Accordion/AccordionItem.playroom.d.mts

@@ -3,7 +3,7 @@ import { StateProp } from "../../playroom/playroomState.mjs";
 import { FC } from "react";
 //#region src/lib/components/Accordion/AccordionItem.playroom.d.ts
 type OptionalProps = 'id';
-type PlayroomAccordionItemProps = StateProp & AccordionItemBaseProps & AccordionItemStateProps & Partial<Pick<AccordionItemProps, OptionalProps>>;
+type PlayroomAccordionItemProps = StateProp & AccordionItemBaseProps & AccordionItemStateProps & Partial<Pick<AccordionItemProps, OptionalProps | 'value'>>;
 declare const AccordionItem: FC<PlayroomAccordionItemProps>;
 //#endregion
 export { AccordionItem };

package/dist/lib/components/Accordion/AccordionItem.playroom.mjs

@@ -1,12 +1,16 @@
+import { AccordionContext } from "./AccordionContext.mjs";
 import { AccordionItem as AccordionItem$1 } from "./AccordionItem.mjs";
 import { useFallbackState } from "../../playroom/playroomState.mjs";
+import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/Accordion/AccordionItem.playroom.tsx
-const AccordionItem = ({ label, stateName, expanded, onToggle, size, tone, weight, badge, icon, ...restProps }) => {
+const AccordionItem = ({ label, stateName, expanded, onToggle, size, tone, weight, badge, icon, value, ...restProps }) => {
+	const managed = Boolean(useContext(AccordionContext)?.managed);
 	const [state, handleChange] = useFallbackState(stateName, expanded, onToggle, false);
 	return /* @__PURE__ */ jsx(AccordionItem$1, {
-		expanded: state,
+		value: typeof value === "string" ? value : void 0,
 		onToggle: handleChange,
+		expanded: managed ? void 0 : state,
 		label: typeof label !== "boolean" ? label : "",
 		size: typeof size === "boolean" ? void 0 : size,
 		tone: typeof tone === "boolean" ? void 0 : tone,

package/dist/lib/components/Avatar/Avatar.cjs

@@ -187,7 +187,6 @@ const Avatar = (0, react.forwardRef)(({ name = "", "aria-label": ariaLabel, "ari
 		outline: !clickable && focusable ? "focus" : void 0,
 		className: {
 			[require_Avatar_css.size[size$1]]: true,
-			[require_Avatar_css.keyline]: true,
 			[require_virtualTouchable_css.virtualTouchable]: clickable && (size$1 === "xsmall" || size$1 === "small")
 		},
 		style: colour ? { background: colour.value } : void 0,
@@ -204,6 +203,7 @@ const Avatar = (0, react.forwardRef)(({ name = "", "aria-label": ariaLabel, "ari
 			height: "full",
 			overflow: "hidden",
 			borderRadius,
+			className: require_Avatar_css.keyline,
 			children: content
 		})
 	});

package/dist/lib/components/Avatar/Avatar.css.cjs

@@ -1,3 +1,4 @@
+const require_px = require("../../utils/px.cjs");
 const require_vars_css = require("../../themes/vars.css.cjs");
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
@@ -12,7 +13,7 @@ const size = (0, _vanilla_extract_css.styleVariants)({
 	xxlarge: 96
 }, (pixels) => ({
 	height: pixels,
-	width: pixels
+	width: `${require_px.px(pixels)} !important`
 }), "size");
 const keyline = (0, _vanilla_extract_css.style)({
 	borderWidth: require_vars_css.vars.borderWidth.standard,

package/dist/lib/components/Avatar/Avatar.css.mjs

@@ -1,3 +1,4 @@
+import { px } from "../../utils/px.mjs";
 import { vars } from "../../themes/vars.css.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants } from "@vanilla-extract/css";
@@ -12,7 +13,7 @@ const size = styleVariants({
 	xxlarge: 96
 }, (pixels) => ({
 	height: pixels,
-	width: pixels
+	width: `${px(pixels)} !important`
 }), "size");
 const keyline = style({
 	borderWidth: vars.borderWidth.standard,

package/dist/lib/components/Avatar/Avatar.mjs

@@ -185,7 +185,6 @@ const Avatar = forwardRef(({ name = "", "aria-label": ariaLabel, "aria-described
 		outline: !clickable && focusable ? "focus" : void 0,
 		className: {
 			[size[size$1]]: true,
-			[keyline]: true,
 			[virtualTouchable]: clickable && (size$1 === "xsmall" || size$1 === "small")
 		},
 		style: colour ? { background: colour.value } : void 0,
@@ -202,6 +201,7 @@ const Avatar = forwardRef(({ name = "", "aria-label": ariaLabel, "aria-described
 			height: "full",
 			overflow: "hidden",
 			borderRadius,
+			className: keyline,
 			children: content
 		})
 	});

package/dist/lib/components/BraidPortal/BraidPortal.cjs

@@ -10,7 +10,6 @@ const BraidPortal = ({ children, container }) => {
 		value: null,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VanillaThemeContainer.VanillaThemeContainer, {
 			theme: vanillaTheme,
-			setDefaultTextTones: true,
 			children
 		})
 	}), container ?? document.body);

package/dist/lib/components/BraidPortal/BraidPortal.mjs

@@ -10,7 +10,6 @@ const BraidPortal = ({ children, container }) => {
 		value: null,
 		children: /* @__PURE__ */ jsx(VanillaThemeContainer, {
 			theme: vanillaTheme,
-			setDefaultTextTones: true,
 			children
 		})
 	}), container ?? document.body);

package/dist/lib/components/BraidProvider/BraidProvider.cjs

@@ -46,7 +46,6 @@ const BraidProvider = ({ theme, styleBody = true, linkComponent, children }) =>
           `
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VanillaThemeContainer.VanillaThemeContainer, {
 			theme: theme.vanillaTheme,
-			setDefaultTextTones: !alreadyInBraidProvider,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponentContext.Provider, {
 				value: linkComponent || linkComponentFromContext,
 				children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BreakpointContext.BreakpointProvider, { children })

package/dist/lib/components/BraidProvider/BraidProvider.mjs

@@ -43,7 +43,6 @@ const BraidProvider = ({ theme, styleBody = true, linkComponent, children }) =>
           `
 		}) : null, /* @__PURE__ */ jsx(VanillaThemeContainer, {
 			theme: theme.vanillaTheme,
-			setDefaultTextTones: !alreadyInBraidProvider,
 			children: /* @__PURE__ */ jsx(LinkComponentContext.Provider, {
 				value: linkComponent || linkComponentFromContext,
 				children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ jsx(BreakpointProvider, { children })

package/dist/lib/components/BraidProvider/VanillaThemeContainer.cjs

@@ -2,8 +2,8 @@ const require_typography_css = require("../../css/typography.css.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/BraidProvider/VanillaThemeContainer.tsx
 const textTones = [require_typography_css.lightModeTone.light, require_typography_css.darkModeTone.dark].join(" ");
-const VanillaThemeContainer = ({ children, theme, setDefaultTextTones }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: `${theme}${setDefaultTextTones ? ` ${textTones}` : ""}`,
+const VanillaThemeContainer = ({ children, theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: `${theme} ${textTones}`,
 	children
 });
 //#endregion

package/dist/lib/components/BraidProvider/VanillaThemeContainer.mjs

@@ -2,8 +2,8 @@ import { darkModeTone, lightModeTone } from "../../css/typography.css.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/BraidProvider/VanillaThemeContainer.tsx
 const textTones = [lightModeTone.light, darkModeTone.dark].join(" ");
-const VanillaThemeContainer = ({ children, theme, setDefaultTextTones }) => /* @__PURE__ */ jsx("div", {
-	className: `${theme}${setDefaultTextTones ? ` ${textTones}` : ""}`,
+const VanillaThemeContainer = ({ children, theme }) => /* @__PURE__ */ jsx("div", {
+	className: `${theme} ${textTones}`,
 	children
 });
 //#endregion

package/dist/lib/components/Drawer/Drawer.cjs

@@ -23,6 +23,11 @@ const assertAccessibleName = ({ title, description, "aria-label": ariaLabel, "ar
 	(0, assert.default)(typeof title === "string" !== (typeof ariaLabel === "string"), dedent.default`
       Drawer requires either a title or an aria-label.
 
+      ${docsMessage}
+    `);
+	(0, assert.default)(typeof title !== "string" || title.trim() !== "", dedent.default`
+      Drawer title must not be empty.
+
       ${docsMessage}
     `);
 	(0, assert.default)(typeof ariaLabel !== "string" || ariaLabel.trim() !== "", dedent.default`

package/dist/lib/components/Drawer/Drawer.mjs

@@ -20,6 +20,11 @@ const assertAccessibleName = ({ title, description, "aria-label": ariaLabel, "ar
 	assert(typeof title === "string" !== (typeof ariaLabel === "string"), dedent`
       Drawer requires either a title or an aria-label.
 
+      ${docsMessage}
+    `);
+	assert(typeof title !== "string" || title.trim() !== "", dedent`
+      Drawer title must not be empty.
+
       ${docsMessage}
     `);
 	assert(typeof ariaLabel !== "string" || ariaLabel.trim() !== "", dedent`

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

@@ -64,7 +64,6 @@ const reducer = (prevState, action) => {
 };
 const ANIMATION_DURATION = 300;
 const Modal = ({ id, open, children, description, onClose, width, closeLabel, illustration, title, "aria-label": ariaLabel, "aria-description": ariaDescription, headingLevel, position, ...restProps }) => {
-	const [trapActive, setTrapActive] = (0, react.useState)(true);
 	const [state, dispatch] = (0, react.useReducer)(reducer, INITIAL);
 	const allowClose = (0, react.useContext)(AllowCloseContext);
 	const shouldFocus = typeof document !== "undefined" && typeof document.hasFocus === "function" && document.hasFocus();
@@ -100,17 +99,8 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 	(0, react.useEffect)(() => {
 		if (typeof onClose === "function") closeHandlerRef.current = onClose;
 	}, [onClose]);
-	(0, react.useEffect)(() => {
-		const event = trapActive ? "blur" : "focus";
-		const handleEvent = () => setTrapActive(!trapActive);
-		window.addEventListener(event, handleEvent);
-		return () => {
-			window.removeEventListener(event, handleEvent);
-		};
-	}, [trapActive]);
 	return state === OPENING || state === OPEN || state === CLOSING ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FocusLock, {
 		className: require_Modal_css.resetStackingContext,
-		disabled: !trapActive,
 		autoFocus: false,
 		onActivation: () => {
 			if (state === OPEN) return;

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

@@ -62,7 +62,6 @@ const reducer = (prevState, action) => {
 };
 const ANIMATION_DURATION = 300;
 const Modal = ({ id, open, children, description, onClose, width, closeLabel, illustration, title, "aria-label": ariaLabel, "aria-description": ariaDescription, headingLevel, position, ...restProps }) => {
-	const [trapActive, setTrapActive] = useState(true);
 	const [state, dispatch] = useReducer(reducer, INITIAL);
 	const allowClose = useContext(AllowCloseContext);
 	const shouldFocus = typeof document !== "undefined" && typeof document.hasFocus === "function" && document.hasFocus();
@@ -98,17 +97,8 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 	useEffect(() => {
 		if (typeof onClose === "function") closeHandlerRef.current = onClose;
 	}, [onClose]);
-	useEffect(() => {
-		const event = trapActive ? "blur" : "focus";
-		const handleEvent = () => setTrapActive(!trapActive);
-		window.addEventListener(event, handleEvent);
-		return () => {
-			window.removeEventListener(event, handleEvent);
-		};
-	}, [trapActive]);
 	return state === OPENING || state === OPEN || state === CLOSING ? /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsxs(FocusLock, {
 		className: resetStackingContext,
-		disabled: !trapActive,
 		autoFocus: false,
 		onActivation: () => {
 			if (state === OPEN) return;

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

@@ -158,6 +158,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		right: "flexEnd"
 	}[position];
 	const modalRadius = !isDrawer ? "xlarge" : void 0;
+	/**
+	* Only Drawer supports omitting the title, in which case there is no header
+	* to hold the content clear of the close button.
+	*/
+	const untitledDrawer = isDrawer && !title;
 	const modalLayout = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalContentScrollLayout, {
 		applyPageBlockGutters: isDrawer,
 		applyFullHeight: isDrawer || allowColumnLayout && Boolean(footer) && !isMobile,
@@ -165,7 +170,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		coverImageEnabled,
 		hasFooter: Boolean(footer),
 		children: [
-			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
+			!untitledDrawer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
 				title,
 				headingLevel,
 				description,
@@ -174,7 +179,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				ref: headingRef,
 				reserveCloseArea: true
 			}) : null,
-			isDrawer && !title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
+			untitledDrawer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
 				require_Bleed.Bleed,
 				/**
 				* Matches close button size so content starts below it. `bottom`
@@ -203,9 +208,9 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		ref: dialogRef,
 		role: "dialog",
 		"aria-label": ariaLabel || title,
-		"aria-describedby": title && description || ariaDescription ? descriptionId : void 0,
+		"aria-describedby": !untitledDrawer && description || ariaDescription ? descriptionId : void 0,
 		"aria-modal": "true",
-		tabIndex: title ? void 0 : -1,
+		tabIndex: untitledDrawer ? -1 : void 0,
 		id: resolvedId,
 		onKeyDown: handleEscape,
 		position: "relative",

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

@@ -158,6 +158,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		right: "flexEnd"
 	}[position];
 	const modalRadius = !isDrawer ? "xlarge" : void 0;
+	/**
+	* Only Drawer supports omitting the title, in which case there is no header
+	* to hold the content clear of the close button.
+	*/
+	const untitledDrawer = isDrawer && !title;
 	const modalLayout = /* @__PURE__ */ jsxs(ModalContentScrollLayout, {
 		applyPageBlockGutters: isDrawer,
 		applyFullHeight: isDrawer || allowColumnLayout && Boolean(footer) && !isMobile,
@@ -165,7 +170,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		coverImageEnabled,
 		hasFooter: Boolean(footer),
 		children: [
-			title ? /* @__PURE__ */ jsx(ModalContentHeader, {
+			!untitledDrawer ? /* @__PURE__ */ jsx(ModalContentHeader, {
 				title,
 				headingLevel,
 				description,
@@ -174,7 +179,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				ref: headingRef,
 				reserveCloseArea: true
 			}) : null,
-			isDrawer && !title ? /* @__PURE__ */ jsx(
+			untitledDrawer ? /* @__PURE__ */ jsx(
 				Bleed,
 				/**
 				* Matches close button size so content starts below it. `bottom`
@@ -203,9 +208,9 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		ref: dialogRef,
 		role: "dialog",
 		"aria-label": ariaLabel || title,
-		"aria-describedby": title && description || ariaDescription ? descriptionId : void 0,
+		"aria-describedby": !untitledDrawer && description || ariaDescription ? descriptionId : void 0,
 		"aria-modal": "true",
-		tabIndex: title ? void 0 : -1,
+		tabIndex: untitledDrawer ? -1 : void 0,
 		id: resolvedId,
 		onKeyDown: handleEscape,
 		position: "relative",

package/dist/lib/components/useToast/Toast.cjs

@@ -25,7 +25,11 @@ const toneToIcon = {
 	critical: require_IconCritical.IconCritical,
 	positive: require_IconPositive.IconPositive
 };
-const toastDuration = 1e4;
+const toastDuration = {
+	short: 6e3,
+	standard: 1e4,
+	indefinite: null
+};
 const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
 	const handleClick = (0, react.useCallback)((event) => {
@@ -54,14 +58,15 @@ const ToastIcon = ({ tone, icon }) => {
 	if (icon) return (0, react.cloneElement)(icon, { tone });
 	return null;
 };
-const Toast = (0, react.forwardRef)(({ toastKey, dedupeKey, message, description, tone, icon, onClose, closeLabel = "Close", action, shouldRemove, data, expanded = true, ...restProps }, ref) => {
+const Toast = (0, react.forwardRef)(({ toastKey, dedupeKey, message, duration = "standard", description, tone, icon, onClose, closeLabel = "Close", action, shouldRemove, data, expanded = true, ...restProps }, ref) => {
 	const remove = (0, react.useCallback)(() => onClose(dedupeKey, toastKey), [
 		onClose,
 		dedupeKey,
 		toastKey
 	]);
+	const resolvedDuration = toastDuration[duration];
 	const { stopTimeout, startTimeout } = require_useTimeout.useTimeout({
-		duration: toastDuration,
+		duration: resolvedDuration,
 		onTimeout: remove
 	});
 	(0, react.useEffect)(() => {

package/dist/lib/components/useToast/Toast.mjs

@@ -23,7 +23,11 @@ const toneToIcon = {
 	critical: IconCritical,
 	positive: IconPositive
 };
-const toastDuration = 1e4;
+const toastDuration = {
+	short: 6e3,
+	standard: 1e4,
+	indefinite: null
+};
 const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
 	const handleClick = useCallback((event) => {
@@ -52,14 +56,15 @@ const ToastIcon = ({ tone, icon }) => {
 	if (icon) return cloneElement(icon, { tone });
 	return null;
 };
-const Toast = forwardRef(({ toastKey, dedupeKey, message, description, tone, icon, onClose, closeLabel = "Close", action, shouldRemove, data, expanded = true, ...restProps }, ref) => {
+const Toast = forwardRef(({ toastKey, dedupeKey, message, duration = "standard", description, tone, icon, onClose, closeLabel = "Close", action, shouldRemove, data, expanded = true, ...restProps }, ref) => {
 	const remove = useCallback(() => onClose(dedupeKey, toastKey), [
 		onClose,
 		dedupeKey,
 		toastKey
 	]);
+	const resolvedDuration = toastDuration[duration];
 	const { stopTimeout, startTimeout } = useTimeout({
-		duration: toastDuration,
+		duration: resolvedDuration,
 		onTimeout: remove
 	});
 	useEffect(() => {

package/dist/lib/components/useToast/ToastTypes.d.cts

@@ -6,6 +6,7 @@ interface ToastAction {
   label: string;
   onClick: () => void;
 }
+type ToastDuration = 'short' | 'standard' | 'indefinite';
 type Toast = {
   key?: string;
   message: string;
@@ -13,6 +14,7 @@ type Toast = {
   action?: ToastAction;
   closeLabel?: string;
   data?: DataAttributeMap;
+  duration?: ToastDuration;
 } & ({
   tone: 'positive' | 'critical';
 } | {
@@ -20,4 +22,4 @@ type Toast = {
   icon?: ReactElement<UseIconProps>;
 });
 //#endregion
-export { Toast, ToastAction };
+export { Toast, ToastAction, ToastDuration };

package/dist/lib/components/useToast/ToastTypes.d.mts

@@ -6,6 +6,7 @@ interface ToastAction {
   label: string;
   onClick: () => void;
 }
+type ToastDuration = 'short' | 'standard' | 'indefinite';
 type Toast = {
   key?: string;
   message: string;
@@ -13,6 +14,7 @@ type Toast = {
   action?: ToastAction;
   closeLabel?: string;
   data?: DataAttributeMap;
+  duration?: ToastDuration;
 } & ({
   tone: 'positive' | 'critical';
 } | {
@@ -20,4 +22,4 @@ type Toast = {
   icon?: ReactElement<UseIconProps>;
 });
 //#endregion
-export { Toast, ToastAction };
+export { Toast, ToastAction, ToastDuration };

package/dist/lib/components/useToast/useFlipList.cjs

@@ -154,11 +154,11 @@ const useFlipList = (expanded) => {
 							property: "transform",
 							from: transform
 						},
-						{
+						...element.classList.contains(require_Toast_css.collapsed) ? [{
 							property: "className",
-							from: expanded ? require_Toast_css.collapsed : void 0,
+							from: require_Toast_css.collapsed,
 							to: void 0
-						}
+						}] : []
 					]
 				});
 			}