braid-design-system 34.9.0 → 34.10.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # 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
+
+- **Drawer:** Reject empty `title` ([#2171](https://github.com/seek-oss/braid-design-system/pull/2171))
+
+  An empty `title` is now treated as invalid, consistent with `aria-label`. Provide a non-empty `title`, or use `aria-label` for an untitled `Drawer`.
+
+- **Avatar:** Ensure loading background fills completely in dark mode ([#2169](https://github.com/seek-oss/braid-design-system/pull/2169))
+
+- playroom: Add Patterns group to snippets ([#2167](https://github.com/seek-oss/braid-design-system/pull/2167))
+
+- **Avatar:** Prevent layout collapse inside Inline component ([#2169](https://github.com/seek-oss/braid-design-system/pull/2169))
+
+- **BraidProvider:** Ensure default text tone follows the theme ([#2163](https://github.com/seek-oss/braid-design-system/pull/2163))
+
+  Nested `BraidProvider` components using different themes now always apply the default text tones according to the selected theme.
+
+- **Dialog:** Restore header rendering when `title` is empty ([#2171](https://github.com/seek-oss/braid-design-system/pull/2171))
+
+  Fixes a regression where a `Dialog` with an empty `title` no longer rendered its `illustration` or `description`.
+
 ## 34.9.0
 
 ### Minor Changes

package/dist/color-mode/query-param.d.cts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

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;