braid-design-system 34.9.1 → 34.10.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # braid-design-system
 
+## 34.10.0
+
+### Minor Changes
+
+- **Accordion, AccordionItem:** Add height animation and shared open state ([#2144](https://github.com/seek-oss/braid-design-system/pull/2144))
+  
+  Items animate their height when opening and closing, unless reduced motion is set.
+  
+  Set `multiple` to `false` so only one item can be open, or use `value`, `defaultValue`, and `onChange` on `Accordion` to choose which items are open.
+  
+  **EXAMPLE USAGE:**
+  
+  ```jsx
+  <Accordion multiple={false} defaultValue="one">
+    <AccordionItem value="one" label="One">
+      ...
+    </AccordionItem>
+    <AccordionItem value="two" label="Two">...</AccordionItem>
+  </Accordion>
+  ```
+- **useToast:** Add `duration` option ([#2181](https://github.com/seek-oss/braid-design-system/pull/2181))
+  
+  Toasts accept `short` (6 seconds), `standard` (10 seconds), or `indefinite`. The default is `standard`, matching the previous dismiss time.
+  
+  **EXAMPLE USAGE:**
+  
+  ```jsx
+  showToast({
+    tone: 'positive',
+    message: 'Saved',
+    duration: 'short',
+  });
+  ```
+
+### Patch Changes
+
+- **Dialog, Drawer:** Fix focus in stacked modals ([#2184](https://github.com/seek-oss/braid-design-system/pull/2184))
+  
+  Fixes an issue where, with multiple modals open, focus could move to an underlying modal after switching away from and back to the browser window, preventing interaction with fields in the top-most modal.
+
 ## 34.9.1
 
 ### Patch Changes

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

@@ -16,6 +16,13 @@ const validSpaceValues = [
 	"xlarge"
 ];
 const defaultSize = "large";
+const normalizeAccordionValue = (input, multiple) => {
+	if (input == null || input === "") return [];
+	const list = typeof input === "string" ? [input] : [...input];
+	(0, assert.default)(list.every((item) => typeof item === "string" && item.length > 0), "Accordion 'value' and 'defaultValue' must be a non-empty string or an array of non-empty strings.");
+	(0, assert.default)(multiple || list.length <= 1, "When 'multiple' is false, Accordion 'value' and 'defaultValue' must be a string or a single-item array.");
+	return list;
+};
 const defaultSpaceForSize = {
 	divided: {
 		xsmall: "medium",
@@ -30,26 +37,67 @@ const defaultSpaceForSize = {
 		large: "large"
 	}
 };
-const Accordion = ({ children, size = defaultSize, tone, weight, space: spaceProp, dividers = true, data, ...restProps }) => {
-	(0, assert.default)(spaceProp === void 0 || Object.values(require_sprinkles_css.normalizeResponsiveValue(spaceProp)).every((value) => value === void 0 || validSpaceValues.includes(value)), `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`);
+const assertUniqueItemValues = (children) => {
+	const seen = /* @__PURE__ */ new Set();
+	for (const child of require_flattenChildren.default(children)) {
+		if (!(0, react.isValidElement)(child)) continue;
+		const itemValue = child.props.value;
+		if (typeof itemValue !== "string") continue;
+		(0, assert.default)(!seen.has(itemValue), `AccordionItem value "${itemValue}" is used more than once. Each AccordionItem value must be unique.`);
+		seen.add(itemValue);
+	}
+};
+const Accordion = (props) => {
+	const { children, size = defaultSize, tone, weight, multiple = true, value, defaultValue, space: spaceProp, dividers = true, data, ...restProps } = props;
+	(0, assert.default)(spaceProp === void 0 || Object.values(require_sprinkles_css.normalizeResponsiveValue(spaceProp)).every((spaceValue) => spaceValue === void 0 || validSpaceValues.includes(spaceValue)), `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`);
 	(0, assert.default)(tone === void 0 || require_AccordionContext.validTones.includes(tone), `The 'tone' prop should be one of the following: ${require_AccordionContext.validTones.map((x) => `"${x}"`).join(", ")}`);
-	if (process.env.NODE_ENV !== "production")
- /**
-	* Validate that consumers are not passing `data-*`props,
-	* which will not work and are not validated by TypeScript.
-	*/
-	require_buildDataAttributes.default({
-		data,
-		validateRestProps: restProps
-	});
+	(0, assert.default)(value === void 0 || defaultValue === void 0, "Accordion 'defaultValue' cannot be set when 'value' is set. Use 'value' to control the open items, or 'defaultValue' for the initial state.");
+	(0, assert.default)(value === void 0 || typeof props.onChange === "function", "Accordion 'onChange' must be set when 'value' is set.");
+	const managed = multiple === false || value !== void 0 || defaultValue !== void 0 || props.onChange !== void 0;
+	if (process.env.NODE_ENV !== "production") {
+		/**
+		* Validate that consumers are not passing `data-*`props,
+		* which will not work and are not validated by TypeScript.
+		*/
+		require_buildDataAttributes.default({
+			data,
+			validateRestProps: restProps
+		});
+		assertUniqueItemValues(children);
+	}
+	const normalizedValue = (0, react.useMemo)(() => value === void 0 ? void 0 : normalizeAccordionValue(value, multiple), [multiple, value]);
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(() => normalizeAccordionValue(defaultValue, multiple));
+	const openValues = normalizedValue ?? uncontrolledValue;
+	const openValuesRef = (0, react.useRef)(openValues);
+	const propsRef = (0, react.useRef)(props);
+	openValuesRef.current = openValues;
+	propsRef.current = props;
+	const toggleValue = (0, react.useCallback)((itemValue) => {
+		const current = openValuesRef.current;
+		const isOpen = current.includes(itemValue);
+		let next;
+		if (!multiple) next = isOpen ? [] : [itemValue];
+		else if (isOpen) next = current.filter((openValue) => openValue !== itemValue);
+		else next = [...current, itemValue];
+		if (normalizedValue === void 0) setUncontrolledValue(next);
+		const p = propsRef.current;
+		if (p.multiple === false) p.onChange?.(next[0] ?? "");
+		else p.onChange?.(next);
+	}, [multiple, normalizedValue]);
 	const contextValue = (0, react.useMemo)(() => ({
 		size,
 		tone,
-		weight
+		weight,
+		managed,
+		openValues,
+		toggleValue
 	}), [
 		size,
 		tone,
-		weight
+		weight,
+		managed,
+		openValues,
+		toggleValue
 	]);
 	const space = spaceProp ?? defaultSpaceForSize[dividers ? "divided" : "undivided"][size];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionContext.AccordionContext.Provider, {

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

@@ -5,7 +5,61 @@ import { AccordionContextValue } from "./AccordionContext.cjs";
 import { FC } from "react";
 //#region src/lib/components/Accordion/Accordion.d.ts
 declare const validSpaceValues: readonly ["medium", "large", "xlarge"];
-interface AccordionProps {
+/** Open item value, or `""` when none are open. */
+type AccordionSingleValue = string | '';
+type ControlledStateSingle = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple: false;
+  /**
+   * Value of the open AccordionItem, or `""` when none are open.
+   */
+  value: AccordionSingleValue;
+  onChange: (value: AccordionSingleValue) => void;
+  defaultValue?: never;
+};
+type ControlledStateMultiple = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple?: true;
+  /**
+   * Values of the open AccordionItems. Pass an empty array when none are open.
+   */
+  value: string[];
+  onChange: (value: string[]) => void;
+  defaultValue?: never;
+};
+type UncontrolledStateSingle = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple: false;
+  /**
+   * Value of the AccordionItem to expand by default.
+   */
+  defaultValue?: AccordionSingleValue;
+  value?: never;
+  onChange?: never;
+};
+type UncontrolledStateMultiple = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple?: true;
+  /**
+   * Values of the AccordionItems to expand by default.
+   */
+  defaultValue?: string[];
+  value?: never;
+  onChange?: never;
+};
+type AccordionProps = {
   children: ReactNodeNoStrings;
   dividers?: boolean;
   size?: AccordionContextValue['size'];
@@ -14,7 +68,7 @@ interface AccordionProps {
   /** @deprecated The spacing is now derived from the `size` prop and will be removed in a future release. */
   space?: RequiredResponsiveValue<(typeof validSpaceValues)[number]>;
   data?: DataAttributeMap;
-}
+} & (ControlledStateSingle | ControlledStateMultiple | UncontrolledStateSingle | UncontrolledStateMultiple);
 declare const Accordion: FC<AccordionProps>;
 //#endregion
 export { Accordion, AccordionProps };

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

@@ -5,7 +5,61 @@ import { AccordionContextValue } from "./AccordionContext.mjs";
 import { FC } from "react";
 //#region src/lib/components/Accordion/Accordion.d.ts
 declare const validSpaceValues: readonly ["medium", "large", "xlarge"];
-interface AccordionProps {
+/** Open item value, or `""` when none are open. */
+type AccordionSingleValue = string | '';
+type ControlledStateSingle = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple: false;
+  /**
+   * Value of the open AccordionItem, or `""` when none are open.
+   */
+  value: AccordionSingleValue;
+  onChange: (value: AccordionSingleValue) => void;
+  defaultValue?: never;
+};
+type ControlledStateMultiple = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple?: true;
+  /**
+   * Values of the open AccordionItems. Pass an empty array when none are open.
+   */
+  value: string[];
+  onChange: (value: string[]) => void;
+  defaultValue?: never;
+};
+type UncontrolledStateSingle = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple: false;
+  /**
+   * Value of the AccordionItem to expand by default.
+   */
+  defaultValue?: AccordionSingleValue;
+  value?: never;
+  onChange?: never;
+};
+type UncontrolledStateMultiple = {
+  /**
+   * Allow more than one item to be open. Defaults to true.
+   * Note: Will default to false next major release.
+   */
+  multiple?: true;
+  /**
+   * Values of the AccordionItems to expand by default.
+   */
+  defaultValue?: string[];
+  value?: never;
+  onChange?: never;
+};
+type AccordionProps = {
   children: ReactNodeNoStrings;
   dividers?: boolean;
   size?: AccordionContextValue['size'];
@@ -14,7 +68,7 @@ interface AccordionProps {
   /** @deprecated The spacing is now derived from the `size` prop and will be removed in a future release. */
   space?: RequiredResponsiveValue<(typeof validSpaceValues)[number]>;
   data?: DataAttributeMap;
-}
+} & (ControlledStateSingle | ControlledStateMultiple | UncontrolledStateSingle | UncontrolledStateMultiple);
 declare const Accordion: FC<AccordionProps>;
 //#endregion
 export { Accordion, AccordionProps };

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

@@ -5,7 +5,7 @@ import { Divider } from "../Divider/Divider.mjs";
 import { Stack } from "../Stack/Stack.mjs";
 import { AccordionContext, validTones } from "./AccordionContext.mjs";
 import assert from "assert";
-import { Children, useMemo } from "react";
+import { Children, isValidElement, useCallback, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/components/Accordion/Accordion.tsx
 const validSpaceValues = [
@@ -14,6 +14,13 @@ const validSpaceValues = [
 	"xlarge"
 ];
 const defaultSize = "large";
+const normalizeAccordionValue = (input, multiple) => {
+	if (input == null || input === "") return [];
+	const list = typeof input === "string" ? [input] : [...input];
+	assert(list.every((item) => typeof item === "string" && item.length > 0), "Accordion 'value' and 'defaultValue' must be a non-empty string or an array of non-empty strings.");
+	assert(multiple || list.length <= 1, "When 'multiple' is false, Accordion 'value' and 'defaultValue' must be a string or a single-item array.");
+	return list;
+};
 const defaultSpaceForSize = {
 	divided: {
 		xsmall: "medium",
@@ -28,26 +35,67 @@ const defaultSpaceForSize = {
 		large: "large"
 	}
 };
-const Accordion = ({ children, size = defaultSize, tone, weight, space: spaceProp, dividers = true, data, ...restProps }) => {
-	assert(spaceProp === void 0 || Object.values(normalizeResponsiveValue(spaceProp)).every((value) => value === void 0 || validSpaceValues.includes(value)), `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`);
+const assertUniqueItemValues = (children) => {
+	const seen = /* @__PURE__ */ new Set();
+	for (const child of flattenChildren(children)) {
+		if (!isValidElement(child)) continue;
+		const itemValue = child.props.value;
+		if (typeof itemValue !== "string") continue;
+		assert(!seen.has(itemValue), `AccordionItem value "${itemValue}" is used more than once. Each AccordionItem value must be unique.`);
+		seen.add(itemValue);
+	}
+};
+const Accordion = (props) => {
+	const { children, size = defaultSize, tone, weight, multiple = true, value, defaultValue, space: spaceProp, dividers = true, data, ...restProps } = props;
+	assert(spaceProp === void 0 || Object.values(normalizeResponsiveValue(spaceProp)).every((spaceValue) => spaceValue === void 0 || validSpaceValues.includes(spaceValue)), `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`);
 	assert(tone === void 0 || validTones.includes(tone), `The 'tone' prop should be one of the following: ${validTones.map((x) => `"${x}"`).join(", ")}`);
-	if (process.env.NODE_ENV !== "production")
- /**
-	* Validate that consumers are not passing `data-*`props,
-	* which will not work and are not validated by TypeScript.
-	*/
-	buildDataAttributes_default({
-		data,
-		validateRestProps: restProps
-	});
+	assert(value === void 0 || defaultValue === void 0, "Accordion 'defaultValue' cannot be set when 'value' is set. Use 'value' to control the open items, or 'defaultValue' for the initial state.");
+	assert(value === void 0 || typeof props.onChange === "function", "Accordion 'onChange' must be set when 'value' is set.");
+	const managed = multiple === false || value !== void 0 || defaultValue !== void 0 || props.onChange !== void 0;
+	if (process.env.NODE_ENV !== "production") {
+		/**
+		* Validate that consumers are not passing `data-*`props,
+		* which will not work and are not validated by TypeScript.
+		*/
+		buildDataAttributes_default({
+			data,
+			validateRestProps: restProps
+		});
+		assertUniqueItemValues(children);
+	}
+	const normalizedValue = useMemo(() => value === void 0 ? void 0 : normalizeAccordionValue(value, multiple), [multiple, value]);
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => normalizeAccordionValue(defaultValue, multiple));
+	const openValues = normalizedValue ?? uncontrolledValue;
+	const openValuesRef = useRef(openValues);
+	const propsRef = useRef(props);
+	openValuesRef.current = openValues;
+	propsRef.current = props;
+	const toggleValue = useCallback((itemValue) => {
+		const current = openValuesRef.current;
+		const isOpen = current.includes(itemValue);
+		let next;
+		if (!multiple) next = isOpen ? [] : [itemValue];
+		else if (isOpen) next = current.filter((openValue) => openValue !== itemValue);
+		else next = [...current, itemValue];
+		if (normalizedValue === void 0) setUncontrolledValue(next);
+		const p = propsRef.current;
+		if (p.multiple === false) p.onChange?.(next[0] ?? "");
+		else p.onChange?.(next);
+	}, [multiple, normalizedValue]);
 	const contextValue = useMemo(() => ({
 		size,
 		tone,
-		weight
+		weight,
+		managed,
+		openValues,
+		toggleValue
 	}), [
 		size,
 		tone,
-		weight
+		weight,
+		managed,
+		openValues,
+		toggleValue
 	]);
 	const space = spaceProp ?? defaultSpaceForSize[dividers ? "divided" : "undivided"][size];
 	return /* @__PURE__ */ jsx(AccordionContext.Provider, {

package/dist/lib/components/Accordion/AccordionContext.d.cts

@@ -5,6 +5,13 @@ interface AccordionContextValue {
   size?: TextProps['size'];
   tone?: (typeof validTones)[number];
   weight?: TextProps['weight'];
+  /**
+   * True when Accordion owns the open items via `multiple={false}`,
+   * `value`, `defaultValue`, or `onChange`.
+   */
+  managed: boolean;
+  openValues: readonly string[];
+  toggleValue: (value: string) => void;
 }
 //#endregion
 export { AccordionContextValue, validTones };

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

@@ -5,6 +5,13 @@ interface AccordionContextValue {
   size?: TextProps['size'];
   tone?: (typeof validTones)[number];
   weight?: TextProps['weight'];
+  /**
+   * True when Accordion owns the open items via `multiple={false}`,
+   * `value`, `defaultValue`, or `onChange`.
+   */
+  managed: boolean;
+  openValues: readonly string[];
+  toggleValue: (value: string) => void;
 }
 //#endregion
 export { AccordionContextValue, validTones };

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

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_buildDataAttributes = require("../private/buildDataAttributes.cjs");
 const require_Box = require("../Box/Box.cjs");
-const require_Stack = require("../Stack/Stack.cjs");
 const require_AccordionContext = require("./AccordionContext.cjs");
 require("./Accordion.cjs");
+const require_useFallbackId = require("../../hooks/useFallbackId.cjs");
 const require_useDisclosure = require("../Disclosure/useDisclosure.cjs");
 const require_Spread = require("../Spread/Spread.cjs");
 const require_Text = require("../Text/Text.cjs");
@@ -21,12 +21,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 = (0, react.useContext)(require_AccordionContext.AccordionContext);
+	const managed = Boolean(accordionContext?.managed);
 	(0, assert.default)(!(accordionContext && sizeProp), "Size cannot be set on AccordionItem when inside Accordion. Size should be set on Accordion instead.");
 	(0, assert.default)(!(accordionContext && toneProp), "Tone cannot be set on AccordionItem when inside Accordion. Tone should be set on Accordion instead.");
 	(0, assert.default)(!(accordionContext && weightProp), "Weight cannot be set on AccordionItem when inside Accordion. Weight should be set on Accordion instead.");
-	(0, assert.default)(toneProp === void 0 || require_AccordionContext.validTones.includes(toneProp), `The 'tone' prop should be one of the following: ${require_AccordionContext.validTones.map((x) => `"${x}"`).join(", ")}`);
+	(0, assert.default)(toneProp === void 0 || require_AccordionContext.validTones.includes(toneProp), `The 'tone' prop should be one of the following: ${require_AccordionContext.validTones.map((tone) => `"${tone}"`).join(", ")}`);
+	(0, assert.default)(!managed || typeof value === "string" && value.length > 0, "AccordionItem 'value' must be a non-empty string when Accordion controls which items are open.");
+	(0, assert.default)(!(managed && expandedProp !== void 0), "expanded cannot be set on AccordionItem when Accordion controls which items are open. Use 'value' and 'onChange' on Accordion.");
 	(0, assert.default)(!badge || badge.type.__isBadge__, `AccordionItem badge prop can only be an instance of Badge. e.g. <AccordionItem badge={<Badge>New</Badge>}>`);
 	(0, assert.default)(!badge || badge.props.bleedY === void 0, "Badge elements cannot set the 'bleedY' prop when passed to an AccordionItem component");
 	(0, assert.default)(!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");
@@ -34,14 +43,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 = (0, react.useRef)(null);
+	const contentSizeRef = (0, react.useRef)(null);
 	(0, assert.default)(typeof label === "undefined" || typeof label === "string", "Label must be a string");
+	const resolvedId = require_useFallbackId.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 } = require_useDisclosure.useDisclosure({
-		id,
-		...restProps.expanded !== void 0 ? {
-			onToggle: restProps.onToggle,
-			expanded: restProps.expanded
-		} : { onToggle: restProps.onToggle }
+		id: resolvedId,
+		...disclosureState
 	});
+	const [trackedExpanded, setTrackedExpanded] = (0, react.useState)(expanded);
+	const [animatedHeight, setAnimatedHeight] = (0, react.useState)(null);
+	const [animationDurationMs, setAnimationDurationMs] = (0, react.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 = (0, react.useCallback)(() => {
+		setAnimatedHeight(null);
+	}, []);
+	const finishHeightTransition = (0, react.useCallback)((event) => {
+		if (isHeightTransition(event)) finishAnimation();
+	}, [finishAnimation]);
+	(0, react.useLayoutEffect)(() => {
+		contentRef.current?.toggleAttribute("inert", !expanded);
+	}, [expanded]);
+	(0, react.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,
@@ -51,8 +110,7 @@ const AccordionItem = ({ id, label, children, badge, size: sizeProp, tone: toneP
 		data,
 		validateRestProps: restProps
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-		space: itemSpace,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 		data,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 			position: "relative",
@@ -91,9 +149,25 @@ const AccordionItem = ({ id, label, children, badge, size: sizeProp, tone: toneP
 				})
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			display: expanded ? "block" : "none",
+			className: {
+				[require_AccordionItem_css.content]: true,
+				[require_AccordionItem_css.contentOpen]: expanded && !isAnimating,
+				[require_AccordionItem_css.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__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+				ref: contentSizeRef,
+				paddingTop: itemSpace,
+				children
+			})
 		})]
 	});
 };

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

@@ -7,7 +7,22 @@ let _vanilla_extract_css = require("@vanilla-extract/css");
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/Accordion/AccordionItem.css.ts", "braid-design-system");
 const button = (0, _vanilla_extract_css.style)([{}, require_virtualTouchable_css.virtualTouchable], "button");
 const focusRing = (0, _vanilla_extract_css.style)([{ outlineOffset: require_vars_css.vars.space.xxsmall }, require_atoms.atoms({ borderRadius: "small" })], "focusRing");
+const content = (0, _vanilla_extract_css.style)([require_atoms.atoms({ overflow: "hidden" }), {
+	transition: "height 200ms ease",
+	"@media": { "screen and (prefers-reduced-motion: reduce)": { transition: "none" } }
+}], "content");
+const contentOpen = (0, _vanilla_extract_css.style)([require_atoms.atoms({ overflow: "visible" }), {
+	height: "auto",
+	transition: "none"
+}], "contentOpen");
+const contentClosed = (0, _vanilla_extract_css.style)({
+	height: 0,
+	visibility: "hidden"
+}, "contentClosed");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
 //#endregion
 exports.button = button;
+exports.content = content;
+exports.contentClosed = contentClosed;
+exports.contentOpen = contentOpen;
 exports.focusRing = focusRing;

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

@@ -7,6 +7,18 @@ import { style } from "@vanilla-extract/css";
 setFileScope("src/lib/components/Accordion/AccordionItem.css.ts", "braid-design-system");
 const button = style([{}, virtualTouchable], "button");
 const focusRing = style([{ outlineOffset: vars.space.xxsmall }, atoms({ borderRadius: "small" })], "focusRing");
+const content = style([atoms({ overflow: "hidden" }), {
+	transition: "height 200ms ease",
+	"@media": { "screen and (prefers-reduced-motion: reduce)": { transition: "none" } }
+}], "content");
+const contentOpen = style([atoms({ overflow: "visible" }), {
+	height: "auto",
+	transition: "none"
+}], "contentOpen");
+const contentClosed = style({
+	height: 0,
+	visibility: "hidden"
+}, "contentClosed");
 endFileScope();
 //#endregion
-export { button, focusRing };
+export { button, content, contentClosed, contentOpen, focusRing };

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

@@ -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.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/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/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
-						}
+						}] : []
 					]
 				});
 			}

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

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

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

@@ -8,7 +8,7 @@ const useTimeout = ({ onTimeout, duration }) => {
 		setActivated(false);
 	}, []);
 	(0, react.useEffect)(() => {
-		if (activated) {
+		if (activated && duration !== null) {
 			timeoutRef.current = window.setTimeout(() => {
 				onTimeout();
 			}, duration);

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

@@ -8,7 +8,7 @@ const useTimeout = ({ onTimeout, duration }) => {
 		setActivated(false);
 	}, []);
 	useEffect(() => {
-		if (activated) {
+		if (activated && duration !== null) {
 			timeoutRef.current = window.setTimeout(() => {
 				onTimeout();
 			}, duration);

package/dist/lib/css/atoms/sprinkles.css.d.cts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("darkMode" | "lightMode")[];
+    conditionNames: ("lightMode" | "darkMode")[];
   };
   styles: {
     readonly background: {

package/dist/lib/css/atoms/sprinkles.css.d.mts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("darkMode" | "lightMode")[];
+    conditionNames: ("lightMode" | "darkMode")[];
   };
   styles: {
     readonly background: {

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

@@ -2,31 +2,27 @@
 const snippets = [
 	{
 		description: "Large",
-		code: "<Accordion>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Large, without dividers",
-		code: "<Accordion dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard",
-		code: "<Accordion size=\"standard\">\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard, without dividers",
-		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Large standalone item",
-		code: "<AccordionItem label=\"Label\">\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item",
+		code: "<Accordion multiple={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Standard standalone item",
-		code: "<AccordionItem label=\"Label\" size=\"standard\">\n  <Placeholder height={100} />\n</AccordionItem>"
-	},
-	{
-		description: "Standalone item with a badge",
-		code: "<AccordionItem\n  label=\"Label\"\n  badge={\n    <Badge tone=\"promote\" weight=\"strong\">\n      Badge\n    </Badge>\n  }\n>\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item with a default value",
+		code: "<Accordion multiple={false} defaultValue=\"item-1\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	}
 ];
 //#endregion

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

@@ -2,31 +2,27 @@
 const snippets = [
 	{
 		description: "Large",
-		code: "<Accordion>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Large, without dividers",
-		code: "<Accordion dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard",
-		code: "<Accordion size=\"standard\">\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard, without dividers",
-		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Large standalone item",
-		code: "<AccordionItem label=\"Label\">\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item",
+		code: "<Accordion multiple={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Standard standalone item",
-		code: "<AccordionItem label=\"Label\" size=\"standard\">\n  <Placeholder height={100} />\n</AccordionItem>"
-	},
-	{
-		description: "Standalone item with a badge",
-		code: "<AccordionItem\n  label=\"Label\"\n  badge={\n    <Badge tone=\"promote\" weight=\"strong\">\n      Badge\n    </Badge>\n  }\n>\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item with a default value",
+		code: "<Accordion multiple={false} defaultValue=\"item-1\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	}
 ];
 //#endregion

package/dist/playroom/FrameComponent.mjs

@@ -1,2 +1 @@
-import FrameComponent_default from "../lib/playroom/FrameComponent.mjs";
-export { FrameComponent_default as default };
+export { default } from "../lib/playroom/FrameComponent.mjs";

package/dist/playroom/scope.mjs

@@ -1,2 +1 @@
-import useScope from "../lib/playroom/useScope.mjs";
-export { useScope as default };
+export { default } from "../lib/playroom/useScope.mjs";

package/dist/playroom/snippets.mjs

@@ -1,2 +1 @@
-import allSnippets from "../lib/playroom/snippets.mjs";
-export { allSnippets as default };
+export { default } from "../lib/playroom/snippets.mjs";

package/dist/test.mjs

@@ -1,2 +1 @@
-import { BraidTestProvider } from "./lib/components/BraidTestProvider/BraidTestProvider.mjs";
-export { BraidTestProvider };
+export { BraidTestProvider } from "./lib/components/BraidTestProvider/BraidTestProvider.mjs";

package/dist/themes/docs.mjs

@@ -1,2 +1 @@
-import docsTheme_css_default from "../lib/themes/docs/docsTheme.css.mjs";
-export { docsTheme_css_default as default };
+export { default } from "../lib/themes/docs/docsTheme.css.mjs";

package/dist/themes/seekBusiness.mjs

@@ -1,2 +1 @@
-import seekBusinessTheme_css_default from "../lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
-export { seekBusinessTheme_css_default as default };
+export { default } from "../lib/themes/seekBusiness/seekBusinessTheme.css.mjs";

package/dist/themes/seekJobs.mjs

@@ -1,2 +1 @@
-import seekJobs_css_default from "../lib/themes/seekJobs/seekJobs.css.mjs";
-export { seekJobs_css_default as default };
+export { default } from "../lib/themes/seekJobs/seekJobs.css.mjs";

package/dist/themes/wireframe.mjs

@@ -1,2 +1 @@
-import wireframeTheme_css_default from "../lib/themes/wireframe/wireframeTheme.css.mjs";
-export { wireframeTheme_css_default as default };
+export { default } from "../lib/themes/wireframe/wireframeTheme.css.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.9.1",
+  "version": "34.10.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {