@persona/design-system 0.10.9 → 0.10.11

package/dist/lint/index.mjs

@@ -103,7 +103,7 @@ const FONT_PROPERTIES = new Set([
 	"letter-spacing"
 ]);
 const FONT_DECLARATION = /(?<![\w-])(?:font-size|font-weight|font-family|line-height|letter-spacing)\s*:/g;
-const message$1 = (name) => `Individual font property \`${name}\`: use a complete \`Typography\` style.`;
+const message$4 = (name) => `Individual font property \`${name}\`: use a complete \`Typography\` style.`;
 const completeTypography = {
 	meta: {
 		type: "problem",
@@ -117,13 +117,500 @@ const completeTypography = {
 					const name = propertyName(property);
 					if (name !== null && FONT_PROPERTIES.has(name)) context.report({
 						node: property.key,
-						message: message$1(name)
+						message: message$4(name)
 					});
 				}
 			},
 			TaggedTemplateExpression(node) {
 				if (!isCssTemplate(node)) return;
-				for (const quasi of node.quasi.quasis) reportMatches(context, quasi, FONT_DECLARATION, (match) => message$1(match[0].replace(/\s*:$/, "")));
+				for (const quasi of node.quasi.quasis) reportMatches(context, quasi, FONT_DECLARATION, (match) => message$4(match[0].replace(/\s*:$/, "")));
+			}
+		};
+	}
+};
+//#endregion
+//#region src/lint/motion.ts
+const cssTextCache = /* @__PURE__ */ new WeakMap();
+function cssText(context, literal) {
+	const cached = cssTextCache.get(literal);
+	if (cached !== void 0) return cached;
+	const [start, end] = literal.range;
+	const source = context.sourceCode.text.slice(start, end);
+	const parts = [];
+	let at = 0;
+	for (const expression of literal.expressions) {
+		const from = source.lastIndexOf("${", expression.range[0] - start);
+		const to = source.indexOf("}", expression.range[1] - start) + 1;
+		parts.push(source.slice(at, from), "_".repeat(to - from));
+		at = to;
+	}
+	parts.push(source.slice(at));
+	const result = {
+		text: blankCssComments(parts.join("")),
+		start
+	};
+	cssTextCache.set(literal, result);
+	return result;
+}
+/** A block that still styles the element itself: `&[data-entering]`, `&.open`, `&:hover`, `@media`. */
+const OWN_BLOCK = /^\s*(?:&(?![\s>+~_,])|@media\b|@supports\b)/;
+/**
+* The element's own declarations, its states and media queries included, with the blocks for its
+* children (`& li:hover`, `${Item}`) and `@keyframes` blanked. Offsets stay the same.
+*/
+function ownDeclarations(text) {
+	const kept = [];
+	let out = "";
+	let selectorStart = 0;
+	for (let i = 0; i < text.length; i++) {
+		const c = text[i];
+		const keeping = kept.every(Boolean);
+		if (c === "{") {
+			const selector = text.slice(selectorStart, i).split(/[;{}]/).at(-1) ?? "";
+			kept.push(keeping && OWN_BLOCK.test(selector));
+			if (!kept.at(-1) && keeping) out = out.slice(0, out.length - selector.length) + selector.replace(/[^\n]/g, " ");
+			out += " ";
+			selectorStart = i + 1;
+		} else if (c === "}") {
+			kept.pop();
+			out += " ";
+			selectorStart = i + 1;
+		} else {
+			if (c === ";") selectorStart = i + 1;
+			out += keeping || c === "\n" ? c : " ";
+		}
+	}
+	return out;
+}
+/** An interpolated mixin whose name says it carries motion: `${overlayMotion}`, `${fadeInMixin}`. */
+const MOTION_MIXIN = /motion|transition|animat|fade|slide|zoom|reveal/i;
+/**
+* True when the template's own text, a nested template in it (`${(p) => p.$open && css`…`}`) or a
+* motion-named mixin it interpolates has a transition or animation.
+*/
+function hasMotion(context, css) {
+	const [start, end] = css.node.quasi.range;
+	if (/(?<![\w-])(?:transition|animation)(?:-[a-z]+)?\s*:/.test(blankCssComments(context.sourceCode.text.slice(start, end)))) return true;
+	return css.node.quasi.expressions.some((expression) => {
+		const name = expression.type === "SpreadElement" ? null : lastName(expression);
+		return name !== null && MOTION_MIXIN.test(name);
+	});
+}
+function cssTemplate(context, node) {
+	if (!isCssTemplate(node)) return null;
+	const { parent } = node;
+	const declared = parent.type === "VariableDeclarator" && parent.init === node && parent.id.type === "Identifier" ? parent.id : null;
+	return {
+		...cssText(context, node.quasi),
+		node,
+		name: declared?.name ?? null,
+		nameNode: declared
+	};
+}
+function reportAt(context, index, length, message) {
+	const { sourceCode } = context;
+	context.report({
+		message,
+		loc: {
+			start: sourceCode.getLocFromIndex(index),
+			end: sourceCode.getLocFromIndex(index + length)
+		}
+	});
+}
+/**
+* Properties whose animation moves the content around them. Narrower than the source's list:
+* `grid-template-rows` is the source's own accordion fix, and type and radius don't reflow a page.
+*/
+const LAYOUT_PROPERTIES = new Set([
+	"width",
+	"height",
+	"min-width",
+	"min-height",
+	"max-width",
+	"max-height",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"inset",
+	"inset-block",
+	"inset-inline",
+	"margin",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"margin-block",
+	"margin-inline",
+	"padding",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"padding-block",
+	"padding-inline",
+	"flex-basis",
+	"gap"
+]);
+/** A string value, written `'…'` or as a template literal with no `${…}`. */
+function stringValue(node) {
+	if (node.type === "Literal") return typeof node.value === "string" ? node.value : null;
+	return node.type === "TemplateLiteral" && node.expressions.length === 0 ? node.quasis[0]?.value.cooked ?? null : null;
+}
+/** `fontSize` → `font-size`. */
+const kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+/** The comma-separated items of a CSS value, ignoring commas inside parentheses, with their offsets. */
+function splitList(value) {
+	const items = [];
+	let depth = 0;
+	let from = 0;
+	for (let i = 0; i <= value.length; i++) {
+		const c = value[i];
+		if (c === "(") depth++;
+		else if (c === ")") depth--;
+		else if (c === "," && depth === 0 || i === value.length) {
+			items.push({
+				item: value.slice(from, i),
+				offset: from
+			});
+			from = i + 1;
+		}
+	}
+	return items;
+}
+/** `transition`, `transition-property`, `animation` and friends, with the value up to `;`, `{` or `}`. */
+const MOTION_DECLARATION$1 = /(?<![\w-])(transition|animation)(-property|-duration|-name)?\s*:\s*([^;{}]*)/g;
+const OPENING_WORDS = new Set([
+	"Modal",
+	"Dialog",
+	"Drawer",
+	"Sheet",
+	"Popover",
+	"Tooltip",
+	"Toast",
+	"Snackbar",
+	"Dropdown",
+	"Menu",
+	"Popup",
+	"Flyout"
+]);
+/** A layer over something: a page scrim when fixed, but often a tile's hover layer or a text highlight. */
+const LAYER_WORDS = new Set([
+	"Overlay",
+	"Backdrop",
+	"Scrim"
+]);
+/** Shells like `ModalWrapper` or `DropdownContainer` aren't here: they hold the surface that moves. */
+const SURFACE_WORDS = new Set([
+	"Content",
+	"Panel",
+	"Surface",
+	"Box",
+	"List",
+	"Card",
+	"Window"
+]);
+const TRIGGERED_WORDS = new Set([
+	"Menu",
+	"Dropdown",
+	"Popover",
+	"Popup",
+	"Flyout"
+]);
+/** A part of a surface, or a persistent surface: `ModalCloseButtonContainer`, `SideMenuPanel`. */
+const NOT_OVERLAY_WORDS = new Set([
+	"Item",
+	"Items",
+	"Option",
+	"Options",
+	"Trigger",
+	"Button",
+	"Btn",
+	"Icon",
+	"Label",
+	"Link",
+	"Divider",
+	"Separator",
+	"Chevron",
+	"Arrow",
+	"Caret",
+	"Title",
+	"Heading",
+	"Header",
+	"Footer",
+	"Close",
+	"Action",
+	"Actions",
+	"Description",
+	"Input",
+	"Field",
+	"Avatar",
+	"Anchor",
+	"Toggle",
+	"Tab",
+	"Row",
+	"Cell",
+	"Text",
+	"Hint",
+	"Caption",
+	"Tag",
+	"Section",
+	"Group",
+	"Side",
+	"Sidebar",
+	"Nav",
+	"Navigation",
+	"Bar"
+]);
+/**
+* What a declared name says it is: `triggered` for a surface that opens from a trigger
+* (`DropdownMenu`, `PopoverContent`), `overlay` for another surface that opens (`ModalOverlay`,
+* `ToastContent`), `layer` for only a layer (`Backdrop`, `SelectionOverlay`), else null. Parts
+* of a surface (`MenuItem`, `ModalHeader`) are null.
+*/
+function overlayKind(name) {
+	const words = name?.match(/[A-Z][a-z0-9]*|^[a-z0-9]+/g);
+	const last = words?.at(-1);
+	if (!words || !last || !OPENING_WORDS.has(last) && !LAYER_WORDS.has(last) && !SURFACE_WORDS.has(last) || words.some((word) => NOT_OVERLAY_WORDS.has(word))) return null;
+	if (words.some((word) => TRIGGERED_WORDS.has(word))) return "triggered";
+	if (words.some((word) => OPENING_WORDS.has(word))) return "overlay";
+	return words.some((word) => LAYER_WORDS.has(word)) ? "layer" : null;
+}
+/** Libraries and hooks that animate mounting and unmounting from outside the CSS. */
+const PRESENCE_LIBRARY = /framer-motion|\bmotion\/react\b|AnimatePresence|react-transition-group|CSSTransition|TransitionGroup|@react-spring|react-spring/;
+const isMotionTag = (context, node) => {
+	const [start, end] = node.tag.range;
+	return /\b(?:motion|m)\.\w|\banimated\.\w/.test(context.sourceCode.text.slice(start, end));
+};
+/** `styled(Popover)`: the template styles a component, which may bring its own motion. */
+function wrapsComponent(node) {
+	let tag = node.tag;
+	while (tag.type === "MemberExpression" || tag.type === "CallExpression" && tag.callee.type === "MemberExpression") tag = tag.type === "MemberExpression" ? tag.object : tag.callee;
+	const argument = tag.type === "CallExpression" ? tag.arguments[0] : void 0;
+	const name = argument !== void 0 && argument.type !== "SpreadElement" ? lastName(argument) : null;
+	return name !== null && /^[A-Z]/.test(name);
+}
+/**
+* The animation names a template uses: each word, or `${identifier}`, in an `animation` or
+* `animation-name` value. Other interpolations (`${ModalClose}:hover`) aren't animations.
+*/
+function animationNames(css) {
+	const names = [];
+	const expressions = css.node.quasi.expressions;
+	for (const match of css.text.matchAll(/(?<![\w-])animation(?:-name)?\s*:\s*([^;{}]*)/g)) {
+		const valueStart = css.start + match.index + match[0].length - match[1].length;
+		const valueEnd = valueStart + match[1].length;
+		for (const expression of expressions) if (expression.type === "Identifier" && expression.range[0] >= valueStart && expression.range[1] <= valueEnd) names.push(expression.name);
+		for (const item of splitList(match[1])) {
+			const word = /^\s*([A-Za-z][\w-]*)/.exec(item.item)?.[1];
+			if (word !== void 0 && word !== "none") names.push(word);
+		}
+	}
+	return names;
+}
+//#endregion
+//#region src/lint/rules/duration-token.ts
+/** `TransitionDuration`, mirrored here because the plugin has no runtime imports. */
+const DURATION_TOKENS = {
+	100: "ExtraFast",
+	150: "Faster",
+	200: "Fast",
+	300: "MediumFast",
+	400: "Medium",
+	1e3: "OneSecond"
+};
+/** `TransitionDurationInSeconds`, the same steps. */
+const SECONDS_TOKENS = { ...DURATION_TOKENS };
+/** At or under this, a duration is a reduced-motion override or an instant change, not motion. */
+const INSTANT_MS = 20;
+const TIME = /(?<![\w.$-])(\d*\.?\d+)(ms|s)(?![\w-])/;
+/** A spinner's or shimmer's period isn't a state change, so the scale doesn't apply. */
+const LOOP$1 = /\binfinite\b/;
+const STRING_PROPERTIES = new Set([
+	"transition",
+	"transitionDuration",
+	"animation",
+	"animationDuration"
+]);
+const toMs = (value, unit) => Number(value) * (unit === "s" ? 1e3 : 1);
+function cssMessage(literal, ms) {
+	const token = DURATION_TOKENS[ms];
+	return token ? `Literal duration ${literal}: use \`TransitionDuration.${token}\` from \`@persona/design-system/variables/transitions\`.` : `Literal duration ${literal} is off the PDS scale: use a \`TransitionDuration\` token (100, 150, 200, 300, 400 or 1000 ms) from \`@persona/design-system/variables/transitions\`.`;
+}
+function secondsMessage(seconds) {
+	const token = SECONDS_TOKENS[Math.round(seconds * 1e3)];
+	return token ? `Literal duration ${seconds}: use \`TransitionDurationInSeconds.${token}\` from \`@persona/design-system/variables/transitions\`.` : `Literal duration ${seconds} is off the PDS scale: use a \`TransitionDurationInSeconds\` token (0.1 to 0.4, or 1) from \`@persona/design-system/variables/transitions\`.`;
+}
+/** The first time in each item of a `transition` or `animation` list: its duration, not its delay. */
+function durations(value) {
+	return splitList(value).flatMap(({ item, offset }) => {
+		const match = TIME.exec(item);
+		if (!match || LOOP$1.test(item)) return [];
+		const ms = toMs(match[1], match[2]);
+		return ms > INSTANT_MS ? [{
+			literal: match[0],
+			ms,
+			offset: offset + match.index
+		}] : [];
+	});
+}
+/** An interpolation that is itself a duration: `${TransitionDuration.Fast}`, `${OPEN_MS}`, `${ms}ms`. */
+const DURATION_EXPRESSION = /duration|_MS\b|Ms\b|\bms\b/i;
+const UNIT_AFTER = /^\s*\}m?s(?![\w-])/;
+/**
+* The CSS text with each duration interpolation written as `0ms`, so it holds the item's duration
+* slot and a literal after it (a delay) isn't read as the duration.
+*/
+function markDurationExpressions(context, node, css) {
+	const source = context.sourceCode.text;
+	let { text } = css;
+	for (const expression of node.quasi.expressions) {
+		const [start, end] = expression.range;
+		if (!DURATION_EXPRESSION.test(source.slice(start, end)) && !UNIT_AFTER.test(source.slice(end))) continue;
+		let from = start - css.start;
+		let to = end - css.start;
+		while (from > 0 && text[from - 1] === "_") from--;
+		while (to < text.length && text[to] === "_") to++;
+		text = text.slice(0, from) + "0ms".padEnd(to - from) + text.slice(to);
+	}
+	return text;
+}
+/**
+* True when `node` is the value of a `transition` key or a `transition={…}` JSX attribute, or a
+* per-value transition inside one (`transition={{ opacity: { duration } }}`).
+*/
+function isTransitionObject(node, depth = 0) {
+	const { parent } = node;
+	if (parent.type === "Property" && parent.value === node) return propertyName(parent) === "transition" || depth === 0 && isTransitionObject(parent.parent, 1);
+	if (parent.type === "JSXExpressionContainer") {
+		const attribute = parent.parent;
+		return attribute.type === "JSXAttribute" && attribute.name.type === "JSXIdentifier" && attribute.name.name === "transition";
+	}
+	return false;
+}
+const durationToken = {
+	meta: {
+		type: "suggestion",
+		docs: docs("Transition and animation durations come from `TransitionDuration` (CSS) or `TransitionDurationInSeconds` (Framer Motion), not literals.")
+	},
+	createOnce(context) {
+		return {
+			TaggedTemplateExpression(node) {
+				const css = cssTemplate(context, node);
+				if (css === null) return;
+				for (const match of markDurationExpressions(context, node, css).matchAll(MOTION_DECLARATION$1)) {
+					if (match[2] === "-property" || match[2] === "-name" || match[2] === "-duration" && LOOP$1.test(css.text)) continue;
+					const valueStart = match.index + match[0].length - match[3].length;
+					for (const { literal, ms, offset } of durations(match[3])) reportAt(context, css.start + valueStart + offset, literal.length, cssMessage(literal, ms));
+				}
+			},
+			Property(node) {
+				const name = propertyName(node);
+				const { value } = node;
+				const text = stringValue(value);
+				if (name === null) return;
+				if (STRING_PROPERTIES.has(name) && text !== null) for (const { literal, ms } of durations(text)) context.report({
+					node,
+					message: cssMessage(literal, ms)
+				});
+				else if (name === "duration" && value.type === "Literal" && typeof value.value === "number" && value.value * 1e3 > INSTANT_MS && node.parent.type === "ObjectExpression" && isTransitionObject(node.parent) && !node.parent.properties.some((item) => item.type === "Property" && propertyName(item) === "repeat")) context.report({
+					node,
+					message: secondsMessage(value.value)
+				});
+			}
+		};
+	}
+};
+//#endregion
+//#region src/lint/rules/exit-motion.ts
+const NO_ANIMATION = /^\s*(?:none|initial|inherit|unset|revert)?\s*$/;
+const LOOP = /\binfinite\b/;
+const FIXED$1 = /(?<![\w-])position\s*:\s*fixed\b/;
+const KEYFRAMES_NAME = /@keyframes\s+([\w-]+)/g;
+/** `fadeOut`, `fade-out`, `exit`: an animation name that reads as an exit (not `layout`). */
+const EXIT_NAME = /(?:^|[-_])(?:out|exit|hide|close|leave|disappear)$|[a-z0-9](?:Out|Exit|Hide|Close|Leave|Disappear)$/;
+/** Ways a file can hold an overlay on screen while it animates out. */
+const EXIT_MARKERS = /AnimatePresence|CSSTransition|TransitionGroup|react-spring|onAnimationEnd|onTransitionEnd|animationend|transitionend|data-state\W{1,4}closed|data-exiting|isExiting|\b[iI]sClosing\b|\bexit=/;
+const styledMessage = (name) => `\`${name}\` animates in but disappears instantly. Give it an exit (React Aria: style \`[data-exiting]\`; Radix: \`[data-state='closed']\`), shorter than the enter.`;
+const MOTION_MESSAGE = "Mounts with an enter animation but unmounts instantly. Add `exit` (inside `AnimatePresence`), shorter than the enter.";
+function isMotionElement(name) {
+	return name.type === "JSXMemberExpression" && name.object.type === "JSXIdentifier" && (name.object.name === "motion" || name.object.name === "m");
+}
+function attribute(node, name) {
+	for (const item of node.attributes) if (item.type === "JSXAttribute" && item.name.type === "JSXIdentifier" && item.name.name === name) return item;
+	return null;
+}
+const isFalse = (item) => item.value?.type === "JSXExpressionContainer" && item.value.expression.type === "Literal" && item.value.expression.value === false;
+/** An `animation` or `animation-name` that plays once: an enter, not a loop or a reset. */
+function hasEnterAnimation(css) {
+	for (const match of ownDeclarations(css.text).matchAll(MOTION_DECLARATION$1)) if (match[1] === "animation" && (match[2] === void 0 || match[2] === "-name") && !NO_ANIMATION.test(match[3]) && !LOOP.test(match[3])) return true;
+	return false;
+}
+/** The node with any grouping parentheses around it. */
+function outermost(node) {
+	let at = node;
+	while (at.parent?.type === "ParenthesizedExpression") at = at.parent;
+	return at;
+}
+function unwrap(node) {
+	let at = node;
+	while (at.type === "ParenthesizedExpression") at = at.expression;
+	return at;
+}
+/** `{open && <X />}` or `{open ? <X /> : null}`: rendered only while something is true. */
+function isConditional(node) {
+	const self = outermost(node);
+	const { parent } = self;
+	return parent?.type === "LogicalExpression" && parent.operator === "&&" && parent.right === self || parent?.type === "ConditionalExpression" && parent.test !== self;
+}
+/** `{tab === 1 ? <motion.div …/> : <B />}` outside `<AnimatePresence>`: a content swap, not an unmount. */
+function isSwap(node) {
+	const self = outermost(node);
+	const { parent } = self;
+	if (parent?.type !== "ConditionalExpression" || insidePresence(node)) return false;
+	const other = unwrap(parent.consequent === self ? parent.alternate : parent.consequent);
+	return other.type === "JSXElement" || other.type === "JSXFragment";
+}
+function insidePresence(node) {
+	for (let at = node.parent; at !== null; at = at.parent) if (at.type === "JSXElement" && at.openingElement.name.type === "JSXIdentifier" && at.openingElement.name.name === "AnimatePresence") return true;
+	return false;
+}
+const exitMotion = {
+	meta: {
+		type: "suggestion",
+		docs: docs("An overlay that animates in also animates out: a styled overlay with an enter animation has an exit, and a conditionally rendered `motion.*` element with `initial` has `exit`.")
+	},
+	createOnce(context) {
+		let candidates = [];
+		let names = /* @__PURE__ */ new Set();
+		return {
+			before() {
+				candidates = [];
+				names = /* @__PURE__ */ new Set();
+			},
+			TaggedTemplateExpression(node) {
+				const css = cssTemplate(context, node);
+				if (css === null) return;
+				if (rootIdentifier(node.tag) === "keyframes" && css.name !== null) names.add(css.name);
+				for (const name of animationNames(css)) names.add(name);
+				for (const match of css.text.matchAll(KEYFRAMES_NAME)) names.add(match[1]);
+				const kind = overlayKind(css.name);
+				if (kind !== null && (kind !== "layer" || FIXED$1.test(ownDeclarations(css.text))) && hasEnterAnimation(css)) candidates.push(css);
+			},
+			JSXElement(node) {
+				const opening = node.openingElement;
+				const initial = attribute(opening, "initial");
+				if (isMotionElement(opening.name) && initial !== null && !isFalse(initial) && attribute(opening, "exit") === null && !opening.attributes.some((item) => item.type === "JSXSpreadAttribute") && isConditional(node) && !isSwap(node)) context.report({
+					node: opening.name,
+					message: MOTION_MESSAGE
+				});
+			},
+			after() {
+				if (candidates.length === 0 || EXIT_MARKERS.test(context.sourceCode.text) || [...names].some((name) => EXIT_NAME.test(name))) return;
+				for (const css of candidates) context.report({
+					node: css.nameNode,
+					message: styledMessage(css.name)
+				});
 			}
 		};
 	}
@@ -219,13 +706,118 @@ const minCopySize = {
 	}
 };
 //#endregion
+//#region src/lint/rules/motion-origin.ts
+/** A scale below 1, as an opening surface grows from: `scale(0.95)`, `scaleY(0)`, `scale: 0.96`. */
+const SCALES = /(?<![\w-])scale(?:[XYZ]|3d)?\(\s*(?:0?\.\d|0(?![.\d]))|(?<![\w-])scale\s*:\s*(?:0?\.\d|0(?![.\d]))/;
+const KEYFRAMES_BLOCK$1 = /@keyframes\s+([\w-]+)\s*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g;
+const ORIGIN = /transform-origin|transformOrigin/;
+const message$3 = (name) => `\`${name}\` scales from its centre. A menu or popover grows from its trigger: set \`transform-origin\` (React Aria: \`var(--trigger-anchor-point)\`; Radix: \`var(--radix-popover-content-transform-origin)\`).`;
+const motionOrigin = {
+	meta: {
+		type: "suggestion",
+		docs: docs("A menu, dropdown or popover that scales sets `transform-origin`, so it grows from its trigger rather than its centre.")
+	},
+	createOnce(context) {
+		let candidates = [];
+		let scaling = /* @__PURE__ */ new Set();
+		return {
+			before() {
+				candidates = [];
+				scaling = /* @__PURE__ */ new Set();
+			},
+			TaggedTemplateExpression(node) {
+				const css = cssTemplate(context, node);
+				if (css === null) return;
+				if (rootIdentifier(node.tag) === "keyframes" && css.name !== null && SCALES.test(css.text)) scaling.add(css.name);
+				for (const match of css.text.matchAll(KEYFRAMES_BLOCK$1)) if (SCALES.test(match[2])) scaling.add(match[1]);
+				if (overlayKind(css.name) === "triggered") candidates.push({
+					css,
+					references: animationNames(css)
+				});
+			},
+			after() {
+				if (ORIGIN.test(context.sourceCode.text)) return;
+				for (const { css, references } of candidates) if (SCALES.test(ownDeclarations(css.text)) || references.some((name) => scaling.has(name))) context.report({
+					node: css.nameNode,
+					message: message$3(css.name)
+				});
+			}
+		};
+	}
+};
+//#endregion
+//#region src/lint/rules/no-layout-motion.ts
+const TRANSITION_PROPERTIES$1 = new Set([
+	"transition",
+	"transitionProperty",
+	"transition-property"
+]);
+const KEYFRAMES_BLOCK = /@keyframes\s+[\w-]+\s*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g;
+const DECLARATION = /(?<![\w-])([a-z-]+)\s*:/g;
+/** `height 0s`: a duration of zero switches the value rather than animating it. */
+const INSTANT = /^\s*[a-z-]+\s+0?\.?0*m?s\b/;
+const message$2 = (property) => `Animating \`${property}\` runs layout on every frame and can shift the content around it. Animate \`transform\` or \`opacity\` instead; to expand a section, animate \`grid-template-rows\` from \`0fr\` to \`1fr\`.`;
+/** Each layout property a transition list names, with its offset in `value`. */
+function layoutItems(value) {
+	return splitList(value).flatMap(({ item, offset }) => {
+		const match = /^\s*([a-z-]+)/.exec(item);
+		const property = match?.[1];
+		return property !== void 0 && LAYOUT_PROPERTIES.has(property) && !INSTANT.test(item) ? [{
+			property,
+			offset: offset + match[0].length - property.length
+		}] : [];
+	});
+}
+function reportKeyframes(context, text, start) {
+	for (const match of text.matchAll(DECLARATION)) {
+		const property = match[1];
+		if (LAYOUT_PROPERTIES.has(property)) reportAt(context, start + match.index + match[0].indexOf(property), property.length, message$2(property));
+	}
+}
+const noLayoutMotion = {
+	meta: {
+		type: "suggestion",
+		docs: docs("Transitions and keyframes animate `transform` and `opacity`, not layout properties such as `height`, `width`, `top` or `margin`.")
+	},
+	createOnce(context) {
+		return {
+			TaggedTemplateExpression(node) {
+				const css = cssTemplate(context, node);
+				if (css === null) return;
+				if (rootIdentifier(node.tag) === "keyframes") {
+					reportKeyframes(context, css.text, css.start);
+					return;
+				}
+				for (const match of css.text.matchAll(KEYFRAMES_BLOCK)) {
+					const body = match[1];
+					reportKeyframes(context, body, css.start + match.index + match[0].indexOf(body));
+				}
+				for (const match of css.text.matchAll(MOTION_DECLARATION$1)) {
+					if (match[1] !== "transition" || match[2] !== void 0 && match[2] !== "-property") continue;
+					const valueStart = match.index + match[0].length - match[3].length;
+					for (const { property, offset } of layoutItems(match[3])) reportAt(context, css.start + valueStart + offset, property.length, message$2(property));
+				}
+			},
+			Property(node) {
+				const name = propertyName(node);
+				const text = stringValue(node.value);
+				if (name === null || !TRANSITION_PROPERTIES$1.has(name) || text === null) return;
+				for (const { property } of layoutItems(kebab(text))) context.report({
+					node,
+					message: message$2(property)
+				});
+			}
+		};
+	}
+};
+//#endregion
 //#region src/lint/rules/no-raw-table.ts
 const TABLE_ELEMENTS = new Set([
 	"table",
 	"th",
 	"td"
 ]);
-const message = (what) => `Hand-rolled table markup (${what}). Use \`Table\`, \`DataTable\` or \`IndexTableLayout\`.`;
+const message$1 = (what) => `Hand-rolled table markup (${what}). Use \`Table\`, \`DataTable\` or \`IndexTableLayout\`.`;
 const noRawTable = {
 	meta: {
 		type: "problem",
@@ -236,21 +828,107 @@ const noRawTable = {
 			JSXOpeningElement(node) {
 				if (node.name.type === "JSXIdentifier" && TABLE_ELEMENTS.has(node.name.name)) context.report({
 					node: node.name,
-					message: message(`<${node.name.name}>`)
+					message: message$1(`<${node.name.name}>`)
 				});
 			},
 			MemberExpression(node) {
 				const name = staticMemberName(node);
 				if (name !== null && TABLE_ELEMENTS.has(name) && node.object.type === "Identifier" && node.object.name === "styled") context.report({
 					node,
-					message: message(`styled.${name}`)
+					message: message$1(`styled.${name}`)
 				});
 			},
 			CallExpression(node) {
 				const [argument] = node.arguments;
 				if (node.callee.type === "Identifier" && node.callee.name === "styled" && argument?.type === "Literal" && typeof argument.value === "string" && TABLE_ELEMENTS.has(argument.value)) context.report({
 					node,
-					message: message(`styled('${argument.value}')`)
+					message: message$1(`styled('${argument.value}')`)
+				});
+			}
+		};
+	}
+};
+//#endregion
+//#region src/lint/rules/no-transition-all.ts
+const TRANSITION_PROPERTIES = new Set([
+	"transition",
+	"transitionProperty",
+	"transition-property"
+]);
+const TAILWIND_ALL = /(?:^|\s)(?:[\w-]+:)*transition-all(?=\s|$)/;
+const MESSAGE$1 = "`transition: all` animates every property, layout included. Name the ones the states change (`opacity`, `transform`, `background-color`).";
+/** The offset, in `value`, of each list item that transitions `all`. */
+function allOffsets(value) {
+	return splitList(value).flatMap(({ item, offset }) => {
+		const match = /^\s*all(?![\w-])/.exec(item);
+		return match ? [offset + match[0].indexOf("all")] : [];
+	});
+}
+const noTransitionAll = {
+	meta: {
+		type: "suggestion",
+		docs: docs("Transition named properties, never `all`, which animates layout too and costs more to paint.")
+	},
+	createOnce(context) {
+		return {
+			TaggedTemplateExpression(node) {
+				const css = cssTemplate(context, node);
+				if (css === null) return;
+				for (const match of css.text.matchAll(MOTION_DECLARATION$1)) {
+					if (match[1] !== "transition" || match[2] !== void 0 && match[2] !== "-property") continue;
+					const valueStart = match.index + match[0].length - match[3].length;
+					for (const offset of allOffsets(match[3])) reportAt(context, css.start + valueStart + offset, 3, MESSAGE$1);
+				}
+			},
+			Property(node) {
+				const name = propertyName(node);
+				const text = stringValue(node.value);
+				if (name !== null && TRANSITION_PROPERTIES.has(name) && text !== null && allOffsets(text).length > 0) context.report({
+					node,
+					message: MESSAGE$1
+				});
+			},
+			Literal(node) {
+				if (typeof node.value === "string" && TAILWIND_ALL.test(node.value)) context.report({
+					node,
+					message: MESSAGE$1
+				});
+			},
+			TemplateElement(node) {
+				if (TAILWIND_ALL.test(node.value.cooked ?? node.value.raw)) context.report({
+					node,
+					message: MESSAGE$1
+				});
+			}
+		};
+	}
+};
+//#endregion
+//#region src/lint/rules/overlay-motion.ts
+const FLOATING = /(?<![\w-])position\s*:\s*(?:fixed|absolute)\b/;
+const FIXED = /(?<![\w-])position\s*:\s*fixed\b/;
+const message = (name) => `\`${name}\` is an overlay with no transition or animation, so it pops in and out. Fade it in and out (a menu or popover also scales a little from its trigger), or use the PDS component.`;
+const overlayMotion = {
+	meta: {
+		type: "suggestion",
+		docs: docs("A hand-rolled overlay (a fixed or absolute styled component named like a modal, drawer, popover, menu, tooltip or toast, or a fixed backdrop) has a transition or animation.")
+	},
+	createOnce(context) {
+		let candidates = [];
+		return {
+			before() {
+				candidates = [];
+			},
+			TaggedTemplateExpression(node) {
+				const css = cssTemplate(context, node);
+				const kind = css === null ? null : overlayKind(css.name);
+				if (css !== null && kind !== null && (kind === "layer" ? FIXED : FLOATING).test(ownDeclarations(css.text)) && !hasMotion(context, css) && !isMotionTag(context, node) && !wrapsComponent(node)) candidates.push(css);
+			},
+			after() {
+				if (candidates.length === 0 || PRESENCE_LIBRARY.test(context.sourceCode.text)) return;
+				for (const css of candidates) context.report({
+					node: css.nameNode,
+					message: message(css.name)
 				});
 			}
 		};
@@ -268,7 +946,7 @@ const MOTION_PROPERTIES = new Set([
 ]);
 const MOTION_DECLARATION = /@keyframes\b|(?<![\w-])(?:animation|animation-name|transition|transition-property)\s*:/g;
 const REDUCED_MOTION = "prefers-reduced-motion";
-const MESSAGE = "Animation or transition in a file with no `prefers-reduced-motion` block. Add one that turns it off.";
+const MESSAGE = "Animation or transition in a file with no `prefers-reduced-motion` block. Add one that keeps the change as a short opacity fade (`ReducedMotionFade`: 150 ms) with no movement, rather than turning it off.";
 const reducedMotion = {
 	meta: {
 		type: "suggestion",
@@ -334,7 +1012,8 @@ const MODULE_PARENTS = new Set([
 	"ExportAllDeclaration",
 	"ImportExpression"
 ]);
-const isSemanticColorCall = (node) => node.callee.type === "Identifier" && node.callee.name === "semanticColor";
+const TOKEN_CALLEES = new Set(["semanticColor", "chartColor"]);
+const isSemanticColorCall = (node) => node.callee.type === "Identifier" && TOKEN_CALLEES.has(node.callee.name);
 const isLinkAttribute = (node) => node.name.type === "JSXIdentifier" && LINK_ATTRIBUTES.has(node.name.name);
 //#endregion
 //#region src/lint/index.ts
@@ -381,7 +1060,7 @@ const plugin = {
 						const name = staticMemberName(node);
 						if (insideSemanticColor === 0 && name !== null && node.object.type === "Identifier" && node.object.name === "Color" && /^[A-Z]\w*$/.test(name)) context.report({
 							node,
-							message: `\`Color.${name}\` outside \`semanticColor\`: paint with a semantic token, with this as its fallback.`
+							message: `\`Color.${name}\` outside \`semanticColor\`: paint with a semantic token, with this as its fallback (or wrap a chart series override in \`chartColor\`).`
 						});
 					}
 				};
@@ -390,7 +1069,13 @@ const plugin = {
 		"complete-typography": completeTypography,
 		"min-copy-size": minCopySize,
 		"reduced-motion": reducedMotion,
-		"no-raw-table": noRawTable
+		"no-raw-table": noRawTable,
+		"exit-motion": exitMotion,
+		"overlay-motion": overlayMotion,
+		"motion-origin": motionOrigin,
+		"no-layout-motion": noLayoutMotion,
+		"no-transition-all": noTransitionAll,
+		"duration-token": durationToken
 	}
 };
 //#endregion