@kanso-labs/kanso-ui 0.44.0 → 0.45.0

package/dist/components/app-bar/index.js

@@ -4,12 +4,14 @@ import { spacing } from "../../tokens/design.tokens.stylex.js";
 import { hasContent } from "../../render/content.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { motionDurationMs, motionEasing } from "../../tokens/values.js";
 import Text from "../text/index.js";
 import { c } from "react/compiler-runtime";
-import { createElement } from "react";
+import { createElement, useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/app-bar/index.tsx
-const GLYPH_INSET = `(48px - 24px) / 2`;
+const ICON_BUTTON_TARGET = "48px";
+const GLYPH_INSET = `(${ICON_BUTTON_TARGET} - 24px) / 2`;
 const HEIGHTS = {
 	lg: {
 		plain: "120px",
@@ -34,21 +36,21 @@ const styles = {
 	},
 	root: {
 		k6CgDc: "x12w9bfk",
-		kGNEyG: "x6s0dn4",
+		kGNEyG: "x1qjc9v5",
 		kWkggS: "x14s9m32",
 		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kjj79g: "xl56j7k",
 		kIyJzY: "xioksi3",
-		k1ekBW: "x8u3r54",
+		k1ekBW: "x15406qy",
 		kAMwcw: "x1seskgd",
 		$$css: true
 	},
 	row: {
-		kGNEyG: "x6s0dn4",
+		kfiyM8: "x10ukxgv",
 		kB7OPa: "x9f619",
-		k1xSpc: "x78zum5",
-		kOIVth: "xzoy561",
+		k1xSpc: "xrvj5dj",
+		kC13JO: "x97ohe",
 		kzqmXN: "xh8yej3",
 		kUOVxO: "xvueqy4",
 		$$css: true
@@ -59,13 +61,61 @@ const styles = {
 		kfdmCh: "xe3zi7u",
 		kt9PQ7: "x15anc7y",
 		$$css: true
+	},
+	text: {
+		kSGwAc: "xamitd3",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kJuA4N: "x12gd1sl",
+		kE4Cay: "xkjl1po",
+		k7Eaqz: "xeuugli",
+		kHjlTd: "xj0a0fe",
+		k8WAf4: "x1cmllll",
+		$$css: true
+	},
+	textBelow: {
+		kSGwAc: "xnav3zx",
+		k8WAf4: "xt970qd",
+		$$css: true
+	},
+	textCenter: {
+		k9WMMc: "x2b8uid",
+		$$css: true
+	}
+};
+const twoRows = {
+	lg: {
+		kTDh7v: "x1mna9mr",
+		k4zj60: "x1gmr53x",
+		kWgvks: "xx38sju",
+		k5JduY: "x1s928wv",
+		kVb13B: "x1vlsijy",
+		k5jvz2: "x1fh8phi",
+		kC13JO: "xc3o5yk",
+		$$css: true
+	},
+	md: {
+		kTDh7v: "x1mna9mr",
+		k4zj60: "x1gmr53x",
+		kWgvks: "xx38sju",
+		k5JduY: "x1s928wv",
+		kVb13B: "x1vlsijy",
+		k5jvz2: "x1v6yq59",
+		kC13JO: "xc3o5yk",
+		$$css: true
 	}
 };
 const HEADLINE_VARIANT = {
-	lg: "headlineMedium",
-	md: "headlineSmall",
+	lg: "displaySmall",
+	md: "headlineMedium",
 	sm: "titleLarge"
 };
+const SUBTITLE_VARIANT = {
+	lg: "titleMedium",
+	md: "labelLarge",
+	sm: "labelMedium"
+};
 const HEADINGS = [
 	"h1",
 	"h2",
@@ -87,26 +137,59 @@ const _temp2 = {
 	ks0D6T: "x13i5qev",
 	"$$css": true
 };
-const rowStyles = { root: (start, end, maxInlineSize) => [
-	_temp2,
-	{
+const rowStyles = {
+	root: (start, end, maxInlineSize) => [
+		_temp2,
+		{
+			kwRFfy: end != null ? "x120eax6" : end,
+			kZCmMZ: start != null ? "xnvo3vl" : start,
+			$$css: true
+		},
+		{
+			"--x-maxInlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(maxInlineSize),
+			"--x-paddingInlineEnd": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+			"--x-paddingInlineStart": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start)
+		}
+	],
+	tracks: (gridTemplateColumns, gridTemplateRows) => [{
+		kumcoG: gridTemplateColumns != null ? "xqketvx" : gridTemplateColumns,
+		k9llMU: gridTemplateRows != null ? "x1xxtoay" : gridTemplateRows,
+		$$css: true
+	}, {
+		"--x-gridTemplateColumns": gridTemplateColumns != null ? gridTemplateColumns : void 0,
+		"--x-gridTemplateRows": gridTemplateRows != null ? gridTemplateRows : void 0
+	}]
+};
+const START_COLUMNS = "auto minmax(0, 1fr) auto";
+const _temp3 = {
+	keoZOQ: "x1vhfslr",
+	"$$css": true
+};
+const textStyles = {
+	inset: (start, end) => [{
 		kwRFfy: end != null ? "x120eax6" : end,
 		kZCmMZ: start != null ? "xnvo3vl" : start,
 		$$css: true
-	},
-	{
-		"--x-maxInlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(maxInlineSize),
+	}, {
 		"--x-paddingInlineEnd": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
 		"--x-paddingInlineStart": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start)
-	}
-] };
+	}],
+	reach: (marginBlockStart) => [_temp3, { "--x-marginBlockStart": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(marginBlockStart) }]
+};
+const UNDER_TARGETS = `calc((${COLLAPSED_HEIGHT} - ${ICON_BUTTON_TARGET}) / 2)`;
+const LINES = [":scope > :is(h1, h2, h3, h4, h5, h6)", ":scope > p"];
 /**
 * Material Design's app bar: the container at the top of a page carrying its
 * title, one or two actions, and the way back out.
 *
+* ```tsx
+* <AppBar headline="Headline" leading={back} size="md" trailing={actions} />
+* ```
+*
 * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;
 * `md` and `lg` are the flexible bars, which give the headline a larger
-* type role and grow to fit a subtitle or a headline that wraps.
+* type role in a row of its own under the slots, and grow to fit a subtitle
+* or a headline that wraps.
 *
 * It paints its own surface, unlike the layout components, because separating
 * itself from the content beneath is the job — which is also why `scrolled`
@@ -114,167 +197,343 @@ const rowStyles = { root: (start, end, maxInlineSize) => [
 * element scrolls, so both are set from its own scroll handler.
 */
 function AppBar(t0) {
-	const $ = c(39);
-	let render;
-	let t1;
-	let t2;
-	let t3;
-	let t4;
-	let t5;
-	if ($[0] !== t0) {
-		const { align: t6, collapsed: t7, contentInset: t8, contentMaxInlineSize: t9, headingLevel: t10, headline, leading, pinned: t11, render: t12, scrolled: t13, size: t14, subtitle, trailing, ...props$1 } = t0;
-		render = t12;
-		const align = t6 === void 0 ? "start" : t6;
-		const collapsed = t7 === void 0 ? false : t7;
-		const contentInset = t8 === void 0 ? spacing.lg : t8;
-		const contentMaxInlineSize = t9 === void 0 ? "none" : t9;
-		const headingLevel = t10 === void 0 ? 1 : t10;
-		const pinned = t11 === void 0 ? false : t11;
-		const scrolled = t13 === void 0 ? false : t13;
-		const size = t14 === void 0 ? "sm" : t14;
-		const collapse = collapsed && size !== "sm";
-		const expandedHeight = hasContent(subtitle) ? HEIGHTS[size].withSubtitle : HEIGHTS[size].plain;
-		const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;
-		const hasLeading = hasContent(leading);
-		const hasTrailing = hasContent(trailing);
-		t5 = useRender;
-		t4 = "header";
-		t1 = props$1;
-		const t15 = props(styles.row, rowStyles.root(edgePadding(contentInset, hasLeading), edgePadding(contentInset, hasTrailing), contentMaxInlineSize));
-		let t16;
-		if ($[7] !== hasLeading || $[8] !== leading) {
-			t16 = !hasLeading ? null : /* @__PURE__ */ jsx("div", {
-				className: "x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4",
-				children: leading
-			});
-			$[7] = hasLeading;
-			$[8] = leading;
-			$[9] = t16;
-		} else t16 = $[9];
-		let t17;
-		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-			t17 = {
-				0: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll" },
-				1: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll x2b8uid" }
-			};
-			$[10] = t17;
-		} else t17 = $[10];
-		const t18 = t17[!!(align === "center") << 0];
-		let t19;
-		if ($[11] !== collapse || $[12] !== headingLevel || $[13] !== headline || $[14] !== size) {
-			t19 = !hasContent(headline) ? null : /* @__PURE__ */ jsx(Text, {
-				className: "x12w9bfk xioksi3 x1nxaspg x1seskgd",
-				render: heading(headingLevel),
-				variant: collapse ? HEADLINE_VARIANT.sm : HEADLINE_VARIANT[size],
-				children: headline
-			});
-			$[11] = collapse;
-			$[12] = headingLevel;
-			$[13] = headline;
-			$[14] = size;
-			$[15] = t19;
-		} else t19 = $[15];
-		let t20;
-		if ($[16] !== collapse || $[17] !== subtitle) {
-			t20 = !hasContent(subtitle) || collapse ? null : /* @__PURE__ */ jsx(Text, {
-				render: PARAGRAPH,
-				tone: "muted",
-				variant: "bodyMedium",
-				children: subtitle
-			});
-			$[16] = collapse;
-			$[17] = subtitle;
-			$[18] = t20;
-		} else t20 = $[18];
-		let t21;
-		if ($[19] !== t18 || $[20] !== t19 || $[21] !== t20) {
-			t21 = /* @__PURE__ */ jsxs("div", {
-				...t18,
-				children: [t19, t20]
-			});
-			$[19] = t18;
-			$[20] = t19;
-			$[21] = t20;
-			$[22] = t21;
-		} else t21 = $[22];
-		let t22;
-		if ($[23] !== hasTrailing || $[24] !== trailing) {
-			t22 = !hasTrailing ? null : /* @__PURE__ */ jsx("div", {
-				className: "x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4",
-				children: trailing
-			});
-			$[23] = hasTrailing;
-			$[24] = trailing;
-			$[25] = t22;
-		} else t22 = $[25];
-		if ($[26] !== t15 || $[27] !== t16 || $[28] !== t21 || $[29] !== t22) {
-			t2 = /* @__PURE__ */ jsxs("div", {
-				...t15,
-				children: [
-					t16,
-					t21,
-					t22
-				]
-			});
-			$[26] = t15;
-			$[27] = t16;
-			$[28] = t21;
-			$[29] = t22;
-			$[30] = t2;
-		} else t2 = $[30];
-		t3 = mergeStyles(props(styles.root, heightStyles.root(height), scrolled && styles.scrolled, pinned && styles.pinned), props$1);
-		$[0] = t0;
-		$[1] = render;
-		$[2] = t1;
-		$[3] = t2;
-		$[4] = t3;
-		$[5] = t4;
-		$[6] = t5;
-	} else {
-		render = $[1];
-		t1 = $[2];
-		t2 = $[3];
-		t3 = $[4];
-		t4 = $[5];
-		t5 = $[6];
-	}
-	let t6;
-	if ($[31] !== t1 || $[32] !== t2 || $[33] !== t3) {
-		t6 = {
-			...t1,
-			children: t2,
-			...t3
+	const $ = c(29);
+	const { align: t1, collapsed: t2, contentInset: t3, contentMaxInlineSize: t4, headingLevel: t5, headline, leading, pinned: t6, render, scrolled: t7, size: t8, subtitle, trailing, ...props$1 } = t0;
+	const align = t1 === void 0 ? "start" : t1;
+	const collapsed = t2 === void 0 ? false : t2;
+	const contentInset = t3 === void 0 ? spacing.lg : t3;
+	const contentMaxInlineSize = t4 === void 0 ? "none" : t4;
+	const headingLevel = t5 === void 0 ? 1 : t5;
+	const pinned = t6 === void 0 ? false : t6;
+	const scrolled = t7 === void 0 ? false : t7;
+	const size = t8 === void 0 ? "sm" : t8;
+	const collapse = collapsed && size !== "sm";
+	const below = size !== "sm" && !collapse;
+	const expandedHeight = hasContent(subtitle) ? HEIGHTS[size].withSubtitle : HEIGHTS[size].plain;
+	const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;
+	const hasLeading = hasContent(leading);
+	const hasTrailing = hasContent(trailing);
+	const centred = align === "center";
+	const hasSlot = hasLeading || hasTrailing;
+	const padsForStart = centred ? hasSlot : hasLeading;
+	const padsForEnd = centred ? hasSlot : hasTrailing;
+	const textRef = useCollapseMotion(collapse, align);
+	const t9 = "header";
+	const t10 = props(styles.row, rowStyles.root(edgePadding(contentInset, padsForStart), edgePadding(contentInset, padsForEnd), contentMaxInlineSize), rowStyles.tracks(centred ? centredColumns(contentInset, hasLeading, hasTrailing) : START_COLUMNS, below ? `minmax(${COLLAPSED_HEIGHT}, auto) 1fr` : `minmax(${COLLAPSED_HEIGHT}, auto)`), heightStyles.root(height), below && twoRows[size]);
+	const t11 = !hasLeading ? null : /* @__PURE__ */ jsx("div", {
+		className: "x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x155k8fu x139gbkf x1kxrqrs x1lqcxt8 x15ir4sr",
+		children: leading
+	});
+	const t12 = props(styles.text, below && styles.textBelow, below && textStyles.inset(glyphRoom(contentInset, padsForStart), glyphRoom(contentInset, padsForEnd)), below && textStyles.reach(`calc(-1 * ${UNDER_TARGETS})`), align === "center" && styles.textCenter);
+	let t13;
+	if ($[0] !== collapse || $[1] !== headingLevel || $[2] !== headline || $[3] !== size) {
+		t13 = !hasContent(headline) ? null : /* @__PURE__ */ jsx(Text, {
+			render: heading(headingLevel),
+			variant: collapse ? HEADLINE_VARIANT.sm : HEADLINE_VARIANT[size],
+			children: headline
+		});
+		$[0] = collapse;
+		$[1] = headingLevel;
+		$[2] = headline;
+		$[3] = size;
+		$[4] = t13;
+	} else t13 = $[4];
+	let t14;
+	if ($[5] !== collapse || $[6] !== size || $[7] !== subtitle) {
+		t14 = !hasContent(subtitle) ? null : /* @__PURE__ */ jsx(Text, {
+			render: PARAGRAPH,
+			tone: "muted",
+			variant: collapse ? SUBTITLE_VARIANT.sm : SUBTITLE_VARIANT[size],
+			children: subtitle
+		});
+		$[5] = collapse;
+		$[6] = size;
+		$[7] = subtitle;
+		$[8] = t14;
+	} else t14 = $[8];
+	let t15;
+	if ($[9] !== t12 || $[10] !== t13 || $[11] !== t14 || $[12] !== textRef) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			...t12,
+			ref: textRef,
+			children: [t13, t14]
+		});
+		$[9] = t12;
+		$[10] = t13;
+		$[11] = t14;
+		$[12] = textRef;
+		$[13] = t15;
+	} else t15 = $[13];
+	let t16;
+	if ($[14] !== hasTrailing || $[15] !== trailing) {
+		t16 = !hasTrailing ? null : /* @__PURE__ */ jsx("div", {
+			className: "x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x1w5n3ug x1txd71x x1qab1bc x6aqprb",
+			children: trailing
+		});
+		$[14] = hasTrailing;
+		$[15] = trailing;
+		$[16] = t16;
+	} else t16 = $[16];
+	let t17;
+	if ($[17] !== t10 || $[18] !== t11 || $[19] !== t15 || $[20] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			...t10,
+			children: [
+				t11,
+				t15,
+				t16
+			]
+		});
+		$[17] = t10;
+		$[18] = t11;
+		$[19] = t15;
+		$[20] = t16;
+		$[21] = t17;
+	} else t17 = $[21];
+	const t18 = mergeStyles(props(styles.root, heightStyles.root(height), scrolled && styles.scrolled, pinned && styles.pinned), props$1);
+	let t19;
+	if ($[22] !== props$1 || $[23] !== t17 || $[24] !== t18) {
+		t19 = {
+			...props$1,
+			children: t17,
+			...t18
 		};
-		$[31] = t1;
-		$[32] = t2;
-		$[33] = t3;
-		$[34] = t6;
-	} else t6 = $[34];
-	let t7;
-	if ($[35] !== render || $[36] !== t4 || $[37] !== t6) {
-		t7 = {
-			defaultTagName: t4,
-			props: t6,
+		$[22] = props$1;
+		$[23] = t17;
+		$[24] = t18;
+		$[25] = t19;
+	} else t19 = $[25];
+	let t20;
+	if ($[26] !== render || $[27] !== t19) {
+		t20 = {
+			defaultTagName: t9,
+			props: t19,
 			render
 		};
-		$[35] = render;
-		$[36] = t4;
-		$[37] = t6;
-		$[38] = t7;
-	} else t7 = $[38];
-	return t5(t7);
+		$[26] = render;
+		$[27] = t19;
+		$[28] = t20;
+	} else t20 = $[28];
+	return useRender(t20);
 }
 /**
-* The row's padding on one edge, for the inset the call site gave.
+* A centred bar's columns: the text in the middle at its own width, and a
+* column either side sharing what it leaves equally, so the text is centred
+* on the row. A side column is never narrower than its slot, which is what
+* moves the text off the middle when a slot is wider than the other side's
+* share, and never as far as overlapping it.
 *
-* A bare `0` is the one length CSS accepts without a unit, and the one it
-* rejects inside `max()`, where it reads as a number, so it is given its
-* unit before the arithmetic sees it.
+* The row pads both edges for a slot, so the two sides match, and an edge
+* with no slot puts back what that padding held off for a glyph as its
+* column's least width. A headline long enough to reach that edge stops on
+* the inset, as it does at the start.
+*/
+function centredColumns(contentInset, hasLeading, hasTrailing) {
+	const room = glyphRoom(contentInset, hasLeading || hasTrailing);
+	const side = (hasSlot) => hasSlot ? "minmax(auto, 1fr)" : `minmax(${room}, 1fr)`;
+	return `${side(hasLeading)} auto ${side(hasTrailing)}`;
+}
+/**
+* Where an animation still under way has the bar and the text drawn: the
+* height it holds the bar at, and each line where its transform has taken it
+* and at the size its scale has reached. A line scales about the point it
+* hangs from, so the transform's translation is how far that point has moved.
 */
+function drawnAt(bar, text, settled) {
+	return {
+		height: bar.getBoundingClientRect().height,
+		lines: LINES.map((selector, index) => {
+			const line = settled.lines[index];
+			const element = text.querySelector(selector);
+			if (line === null || element === null) return null;
+			const moved = matrixOf(element);
+			return {
+				size: line.size * moved.a,
+				x: line.x + moved.e,
+				y: line.y + moved.f
+			};
+		})
+	};
+}
+/** The row's padding on one edge, for the inset the call site gave. */
 function edgePadding(contentInset, hasSlot) {
-	const inset = contentInset.trim() === "0" ? "0px" : contentInset;
+	const inset = withUnit(contentInset);
 	return hasSlot ? `max(0px, ${inset} - ${GLYPH_INSET})` : inset;
 }
+/**
+* Where the bar and each of the text's lines are drawn. A line's point is on
+* the edge its text hangs from: the middle when it is centred, and the start
+* edge otherwise, which is the right edge in a right-to-left page. Each line
+* is as wide as the text block, so that edge is its box's.
+*/
+function geometryOf(bar, text, align) {
+	const frame = bar.getBoundingClientRect();
+	return {
+		height: frame.height,
+		lines: LINES.map((selector) => {
+			const element = text.querySelector(selector);
+			if (element === null) return null;
+			const box = element.getBoundingClientRect();
+			const edge = align === "center" ? (box.left + box.right) / 2 : isRightToLeft(element) ? box.right : box.left;
+			return {
+				size: Number.parseFloat(getComputedStyle(element).fontSize),
+				x: edge - frame.left,
+				y: glyphTopOf(element) - frame.top
+			};
+		})
+	};
+}
+/**
+* What the row's padding held back on one edge for a slot's glyph, which the
+* text in the second row puts back: the inset less `edgePadding`, so the
+* smaller of the inset and GLYPH_INSET.
+*/
+function glyphRoom(contentInset, hasSlot) {
+	return hasSlot ? `min(${withUnit(contentInset)}, ${GLYPH_INSET})` : "0px";
+}
+/**
+* Where an element's first glyphs start, which is below its box's top by
+* half its line's leading. The leading is a share of the line height, and
+* the two roles a line moves between do not keep line height and type size
+* in one ratio, so a line scaled by its type size from its box's corner
+* starts its glyphs off where they were drawn: about a pixel, for a large
+* bar's headline.
+*/
+function glyphTopOf(element) {
+	const range = document.createRange();
+	range.selectNodeContents(element);
+	const first = range.getClientRects().item(0);
+	return first === null ? element.getBoundingClientRect().top : first.top;
+}
+/** Whether the text runs right to left, which decides the edge it hangs from. */
+function isRightToLeft(element) {
+	return getComputedStyle(element).direction === "rtl";
+}
+/** The transform an element is drawn with, `none` reading as no change. */
+function matrixOf(element) {
+	return new DOMMatrixReadOnly(getComputedStyle(element).transform);
+}
+/**
+* The point a line scales about, in its own box: the top of its glyphs, on
+* the edge its text hangs from.
+*/
+function originOf(element, align) {
+	return `${align === "center" ? "center" : isRightToLeft(element) ? "right" : "left"} ${glyphTopOf(element) - element.getBoundingClientRect().top}px`;
+}
+/**
+* Read when the bar changes state rather than once at mount, so a reader who
+* changes the setting is answered by the next collapse.
+*/
+function prefersReducedMotion() {
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* Animates a flexible bar between its two states, and returns the ref for the
+* text block whose lines it moves.
+*
+* Collapsing changes the bar's layout rather than a value — the text leaves
+* the second row for the strip, both lines take the small bar's type roles,
+* and the bar's height drops from a minimum to whatever its content takes —
+* so there is nothing for a CSS transition to interpolate. This plays it the
+* other way round: the change has already been laid out when the effect runs,
+* so the bar is animated from the height it had to the one it has, and each
+* line from where and how large it was drawn to where and how large it is,
+* by a transform that starts at the difference and ends at none. A line
+* scales about the point its glyphs hang from, which is what lands its first
+* frame on the glyphs it replaces — see glyphTopOf. A scale rather than a
+* transition of the type itself, which would lay the text out again on every
+* frame and move it away from the place it was measured at. Each line moves
+* on its own rather than with the block, since the subtitle starts under the
+* headline's line, whose height changes with its role. The slots need
+* nothing: they are in the strip in both states.
+*
+* The bar's height is animated through `min-block-size` as well as its
+* height, since the minimum would otherwise hold an expanding bar at its new
+* height from the first frame, and it is clipped while it moves, since an
+* expanding bar's second row is laid out at full height from the start.
+*
+* Where the text was is measured after every commit that leaves the state
+* alone, so it is current when the state does change. A change that lands
+* while the last one is still moving starts from where the bar and the text
+* are drawn at that moment, read off the running animations, so reversing
+* mid-way turns round rather than jumping to the end first.
+*
+* Its timing is the root's `background-color` transition's, the `medium1`
+* duration and the emphasized curve, so the fill and the height move as one.
+* Those come from tokens/values rather than the theme, since `animate()`
+* throws on a var(), and the motion is skipped under reduced motion, as the
+* root's transition is.
+*/
+function useCollapseMotion(collapse, align) {
+	const $ = c(4);
+	const textRef = useRef(null);
+	const settled = useRef(null);
+	const collapsedBefore = useRef(collapse);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const animations = useRef(t0);
+	let t1;
+	if ($[1] !== align || $[2] !== collapse) {
+		t1 = () => {
+			const text = textRef.current;
+			const bar = text?.parentElement?.parentElement;
+			if (text == null || bar == null) return;
+			const moving = animations.current.some(_temp4);
+			if (collapsedBefore.current === collapse) {
+				if (!moving) settled.current = geometryOf(bar, text, align);
+				return;
+			}
+			collapsedBefore.current = collapse;
+			const last = settled.current;
+			const from = moving && last !== null ? drawnAt(bar, text, last) : last;
+			for (const animation_0 of animations.current) animation_0.cancel();
+			animations.current = [];
+			const to = geometryOf(bar, text, align);
+			settled.current = to;
+			if (from === null || prefersReducedMotion()) return;
+			const timing = {
+				duration: motionDurationMs.medium1,
+				easing: motionEasing.emphasized
+			};
+			const heights = [`${from.height}px`, `${to.height}px`];
+			animations.current = [bar.animate({
+				blockSize: heights,
+				clipPath: ["inset(0)", "inset(0)"],
+				minBlockSize: heights
+			}, timing)];
+			for (const [index, selector] of LINES.entries()) {
+				const element = text.querySelector(selector);
+				const was = from.lines[index];
+				const is = to.lines[index];
+				if (element === null || was == null || is == null || is.size === 0) continue;
+				const origin = originOf(element, align);
+				animations.current.push(element.animate({
+					transform: [`translate(${was.x - is.x}px, ${was.y - is.y}px) scale(${was.size / is.size})`, "none"],
+					transformOrigin: [origin, origin]
+				}, timing));
+			}
+		};
+		$[1] = align;
+		$[2] = collapse;
+		$[3] = t1;
+	} else t1 = $[3];
+	useLayoutEffect(t1);
+	return textRef;
+}
+/**
+* The inset as a length CSS arithmetic accepts. A bare `0` is the one length
+* CSS takes without a unit, and the one it rejects inside `max()` and `min()`,
+* where it reads as a number.
+*/
+function _temp4(animation) {
+	return animation.playState === "running";
+}
+function withUnit(contentInset) {
+	return contentInset.trim() === "0" ? "0px" : contentInset;
+}
 //#endregion
 export { AppBar as default };