@godaddy/gd-commerce-storefront 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Link, useParams, useSearchParams } from "react-router";
 
@@ -61,8 +61,9 @@ async function request(path, init) {
 		throw cause;
 	}
 }
-function money(value, currency) {
-	const formatter = new Intl.NumberFormat("en-US", {
+/** Formats minor units, such as cents, as currency. Inside the provider, prefer `useMoney`, which follows its `locale`. */
+function money(value, currency, locale = "en-US") {
+	const formatter = new Intl.NumberFormat(locale, {
 		style: "currency",
 		currency
 	});
@@ -112,7 +113,7 @@ function useSampleCart() {
 	if (!value) throw new Error("Mount CommerceProvider around sample products.");
 	return value;
 }
-function SampleCartProvider({ enabled, onAdd, announce, children }) {
+function SampleCartProvider({ enabled, onAdd, announce, emit, children }) {
 	const session = useMemo(() => ({ enabled }), [enabled]);
 	const active = useRef(session);
 	active.current = session;
@@ -163,12 +164,27 @@ function SampleCartProvider({ enabled, onAdd, announce, children }) {
 			},
 			changeQuantity: async (key, quantity) => {
 				const updated = quantity >= 1 && update(key, quantity);
-				if (updated) announce("Sample cart quantity updated.");
+				if (updated) {
+					announce("Sample cart quantity updated.");
+					emit({
+						type: "quantity-changed",
+						itemId: key,
+						quantity,
+						isSample: true
+					});
+				}
 				return updated;
 			},
 			remove: async (key) => {
 				const updated = update(key, 0);
-				if (updated) announce("Sample item removed from cart.");
+				if (updated) {
+					announce("Sample item removed from cart.");
+					emit({
+						type: "item-removed",
+						itemId: key,
+						isSample: true
+					});
+				}
 				return updated;
 			}
 		},
@@ -186,7 +202,39 @@ function useCommerce() {
 	if (!context) throw new Error("Mount CommerceProvider once around the header and page outlet, inside the router.");
 	return context;
 }
+/**
+* Formats minor units, such as cents, in the provider's `locale`, the way the package's own parts do. Uses the
+* store's currency unless `currency` is given.
+*/
+function useMoney() {
+	const { locale, config } = useCommerce();
+	const { currencyCode } = config;
+	return useCallback((value, currency = currencyCode) => money(value, currency, locale), [locale, currencyCode]);
+}
 const CONNECTING_FAILURE_GRACE_MS = 6e4;
+/** `locale` as a canonical tag, or `en-US` when it is not a valid one, so one bad prop cannot break every price. */
+function resolveLocale(locale) {
+	if (!locale) return "en-US";
+	try {
+		return Intl.getCanonicalLocales(locale)[0] ?? "en-US";
+	} catch {
+		if (process.env.NODE_ENV !== "production") console.warn(`[gd-commerce-storefront] "${locale}" is not a valid locale, so prices use en-US.`);
+		return "en-US";
+	}
+}
+const logCallbackFailure = (cause) => console.error("[gd-commerce-storefront] A storefront callback threw.", cause);
+/**
+* Runs a host callback so that its failure cannot fail the cart operation that triggered it. An async callback is
+* not awaited; its rejection is logged instead of becoming an unhandled rejection.
+*/
+function callHost(callback) {
+	try {
+		const result = callback();
+		if (typeof result?.then === "function") Promise.resolve(result).catch(logCallbackFailure);
+	} catch (cause) {
+		logCallbackFailure(cause);
+	}
+}
 async function loadConfig(signal) {
 	const config = await request("/config", { signal });
 	if (config?.state === "unbound" || config?.state === "connecting") {
@@ -200,7 +248,8 @@ async function loadConfig(signal) {
 		currencyCode: config.currencyCode
 	};
 }
-function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, onItemAdded }) {
+function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, getSwatch, locale, onItemAdded, onEvent }) {
+	const resolvedLocale = useMemo(() => resolveLocale(locale), [locale]);
 	const config = useQuery({
 		retry: false,
 		queryKey: ["commerce", "configuration"],
@@ -229,11 +278,14 @@ function CommerceProvider({ children, catalogPath = "/shop", productPath = "/pro
 			config.refetch();
 		},
 		theme,
+		getSwatch,
+		locale: resolvedLocale,
 		onItemAdded,
+		onEvent,
 		children
 	});
 }
-function BoundCommerceProvider({ config, children, connection, connectionError, retryConnection, theme, onItemAdded }) {
+function BoundCommerceProvider({ config, children, connection, connectionError, retryConnection, theme, getSwatch, locale, onItemAdded, onEvent }) {
 	const storageKey = `godaddy:commerce-storefront:cart:${config.cartScope}`;
 	const cartIdStorage = useMemo(() => new CartIdStorage(storageKey), [storageKey]);
 	const ready = connection === "ready";
@@ -257,8 +309,26 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	const queue = useRef(Promise.resolve(true));
 	const alive = useRef(true);
 	const opener = useRef(null);
-	const added = useRef(onItemAdded);
-	added.current = onItemAdded;
+	const callbacks = useRef({
+		onItemAdded,
+		onEvent
+	});
+	callbacks.current = {
+		onItemAdded,
+		onEvent
+	};
+	/** Reports an event to the host. A callback that throws is logged, and the operation still succeeds. */
+	function emit(event) {
+		if (event.type === "item-added") {
+			const { name, quantity, isSample } = event;
+			callHost(() => callbacks.current.onItemAdded?.({
+				name,
+				quantity,
+				isSample
+			}));
+		}
+		callHost(() => callbacks.current.onEvent?.(event));
+	}
 	const drawers = useRef(0);
 	const registerDrawer = useCallback(() => {
 		drawers.current += 1;
@@ -325,7 +395,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			throw cause;
 		}
 	}
-	function run(operation, loading = false) {
+	function run(kind, operation, loading = false) {
 		const task = queue.current.then(async () => {
 			if (!isActive()) return false;
 			setPending(true);
@@ -338,7 +408,15 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 				else await operation();
 				return isActive();
 			} catch (cause) {
-				if (isActive()) setError(message(cause));
+				if (isActive()) {
+					const text = message(cause);
+					setError(text);
+					emit({
+						type: "error",
+						operation: kind,
+						message: text
+					});
+				}
 				return false;
 			} finally {
 				if (isActive()) {
@@ -351,7 +429,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		return task;
 	}
 	function refresh() {
-		return run(hydrate, true);
+		return run("refresh", hydrate, true);
 	}
 	useEffect(() => {
 		alive.current = true;
@@ -382,7 +460,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 	}, [cartIdStorage, connection]);
 	function addItem(item) {
 		rememberOpener();
-		return run(async () => {
+		return run("add", async () => {
 			if (!item.skuId || !item.name || !Number.isInteger(item.quantity) || item.quantity < 1) throw new Error("Select a product variant and a positive quantity.");
 			await hydrate();
 			if (!isActive()) return;
@@ -404,7 +482,9 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			commit(result.cart);
 			setAnnouncement(`${item.name} added to your cart.`);
 			openDrawer();
-			added.current?.({
+			emit({
+				type: "item-added",
+				skuId: item.skuId,
 				name: item.name,
 				quantity: item.quantity,
 				isSample: false
@@ -412,7 +492,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 		});
 	}
 	function mutateItem(itemId, method, quantity) {
-		return run(async () => {
+		return run(method === "DELETE" ? "remove" : "change-quantity", async () => {
 			await hydrate();
 			if (!isActive()) return;
 			if (!id.current || !currentCart.current?.lineItems?.some((item) => item.id === itemId)) throw new Error("This item is no longer in the cart.");
@@ -425,10 +505,20 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			if (!isActive()) return;
 			commit(result.cart);
 			setAnnouncement(method === "DELETE" ? "Item removed from cart." : "Cart quantity updated.");
+			emit(method === "DELETE" ? {
+				type: "item-removed",
+				itemId,
+				isSample: false
+			} : {
+				type: "quantity-changed",
+				itemId,
+				quantity: quantity ?? 0,
+				isSample: false
+			});
 		});
 	}
 	function applyDiscount(code) {
-		return run(async () => {
+		return run("discount", async () => {
 			await hydrate();
 			if (!isActive()) return;
 			if (!id.current || !code.trim()) throw new Error("Add an item and enter a promotion code.");
@@ -441,10 +531,14 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			if (!isActive()) return;
 			commit(result.cart);
 			setAnnouncement("Promotion codes updated.");
+			emit({
+				type: "discount-applied",
+				code: code.trim()
+			});
 		});
 	}
 	function checkout() {
-		return run(async () => {
+		return run("checkout", async () => {
 			if (!config.checkoutSuccessPath) throw new Error("Checkout has not been enabled for this store.");
 			await hydrate();
 			if (!isActive()) return;
@@ -464,6 +558,10 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			if (typeof session$1.url !== "string" || !session$1.url.trim()) throw new Error("Commerce did not return a checkout URL.");
 			const url = new URL(session$1.url, origin);
 			if (url.protocol !== "https:") throw new Error("Commerce returned an invalid checkout URL.");
+			emit({
+				type: "checkout-started",
+				cartId: id.current
+			});
 			window.location.assign(url.href);
 		});
 	}
@@ -474,6 +572,8 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			connectionError,
 			retryConnection,
 			theme,
+			getSwatch,
+			locale,
 			cart,
 			open,
 			setOpen: (next) => {
@@ -501,10 +601,13 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			children: /* @__PURE__ */ jsx(SampleCartProvider, {
 				enabled: connection === "unbound",
 				announce: setAnnouncement,
+				emit,
 				onAdd: (name) => {
 					setAnnouncement(`${name} added to your sample cart.`);
 					openDrawer();
-					added.current?.({
+					emit({
+						type: "item-added",
+						skuId: null,
 						name,
 						quantity: 1,
 						isSample: true
@@ -631,6 +734,129 @@ function getProductAttributes(skuGroup) {
 function getProductName(skuGroup) {
 	return skuGroup.label ?? skuGroup.name ?? "Product";
 }
+/** Lowercases a label for use mid-sentence, leaving acronyms alone: "Size" becomes "size", "US Size" stays. */
+const inSentence = (label) => label.replace(/^[A-Z](?=[a-z])/, (first) => first.toLowerCase());
+/** Whether `compareAt` is above `price`, so the price is a sale price. */
+function isOnSale(price, compareAt) {
+	return typeof price === "number" && typeof compareAt === "number" && compareAt > price;
+}
+/**
+* Each SKU's price paired with its own compare-at price, or `null` unless the response has every SKU and each has a
+* price. The catalog list returns too few SKUs and no SKU prices, so its cards fall back to the product's ranges.
+*/
+function getPairedPrices(product) {
+	const connection = product?.skus;
+	const skus = connection?.edges?.flatMap((edge) => edge?.node ? [edge.node] : []) ?? [];
+	if (!skus.length || connection?.pageInfo?.hasNextPage || (connection?.totalCount ?? skus.length) !== skus.length) return null;
+	const pairs = skus.flatMap((sku) => {
+		const price = sku.prices?.edges?.find((entry) => entry?.node?.value)?.node;
+		return typeof price?.value?.value === "number" ? [{
+			value: price.value.value,
+			compareAt: price.compareAtValue?.value ?? null
+		}] : [];
+	});
+	return pairs.length === skus.length ? pairs : null;
+}
+/**
+* Whether some SKU's compare-at price is above that SKU's own price. Without every SKU's price, only a product whose
+* lowest compare-at price is above its highest price is certainly on sale, so other products show no badge.
+*/
+function isProductOnSale(product) {
+	const pairs = getPairedPrices(product);
+	if (pairs) return pairs.some((pair) => isOnSale(pair.value, pair.compareAt));
+	return isOnSale(product?.priceRange?.max, product?.compareAtPriceRange?.min);
+}
+/**
+* The compare-at price that belongs with the product's starting price, so a struck-through price never pairs one
+* SKU's price with another SKU's compare-at price. With every SKU and its price loaded, the cheapest SKUs must share
+* one compare-at price above their price. Otherwise the product needs a single price and a single compare-at price.
+*/
+function getStartingCompareAt(product) {
+	const price = product?.priceRange;
+	const compareAt = product?.compareAtPriceRange;
+	const pairs = getPairedPrices(product);
+	if (pairs) {
+		const lowest = Math.min(...pairs.map((pair) => pair.value));
+		if (lowest !== price?.min) return null;
+		const compareAts = new Set(pairs.flatMap((pair) => pair.value === lowest ? [pair.compareAt] : []));
+		const [only] = compareAts;
+		return compareAts.size === 1 && only != null && isOnSale(lowest, only) ? only : null;
+	}
+	return price?.min === price?.max && compareAt?.min === compareAt?.max && isOnSale(price?.min, compareAt?.min) ? compareAt?.min ?? null : null;
+}
+/** The SKU's attribute value names, or `null` when the response does not include them. */
+function getSkuAttributeValueNames(sku) {
+	const edges = sku?.attributeValues?.edges;
+	if (!edges) return null;
+	return edges.flatMap((edge) => edge?.node?.name ? [edge.node.name] : []);
+}
+
+//#endregion
+//#region src/class-names.ts
+const buttonClass = "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-commerce-accent px-5 py-2 text-sm font-medium text-commerce-on-accent transition-colors hover:bg-commerce-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-commerce-accent disabled:cursor-not-allowed disabled:bg-commerce-tint-strong disabled:text-commerce-muted disabled:hover:bg-commerce-tint-strong";
+/** A quieter button for repeated or secondary actions: transparent, outlined in the inherited text color. */
+const secondaryButtonClass = "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-commerce-edge px-5 py-2 text-sm font-medium transition-colors hover:bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:cursor-not-allowed disabled:border-commerce-line disabled:text-commerce-muted disabled:hover:bg-transparent";
+const inputClass = "min-h-11 rounded-lg border border-neutral-400 bg-white px-3 py-2 text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-900";
+/** A self-contained message box: its own background and text, so it reads on any page or surface. */
+const errorNoticeClass = "rounded-lg bg-red-50 px-4 py-3 text-sm text-red-800";
+/** The underlined action inside an `errorNoticeClass` box. */
+const errorActionClass = "mt-1 min-h-11 font-medium text-red-800 underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-red-800 disabled:cursor-not-allowed";
+/** The Sale badge: its own fill and text, so it reads over an image or on any page. */
+const saleBadgeClass = "inline-flex rounded bg-commerce-sale px-2 py-0.5 text-xs font-semibold leading-5 text-commerce-on-sale";
+
+//#endregion
+//#region src/part.ts
+/**
+* Whether `children` renders anything, so `{custom && <Part />}` with `custom` false falls back to the default. Blank
+* text and fragments holding nothing count as nothing. A component element counts as content: what it renders is
+* not known until it renders.
+*/
+const hasChildren = (children) => Children.toArray(children).some((child) => {
+	if (typeof child === "string") return child.trim() !== "";
+	if (isValidElement(child) && child.type === Fragment) return hasChildren(child.props.children);
+	return true;
+});
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+/** Classes for the element that receives a part's `className`. The package CSS reset skips `commerce-part`. */
+const partClass = (...classes) => cx("commerce-part", ...classes);
+/**
+* Props for a part's outer element: `partClass` plus `data-commerce-part`, the part's name in kebab case, such as
+* `cart-checkout`. The attribute is a stable styling hook; internal utility classes are not.
+*/
+const partProps = (name, ...classes) => ({
+	className: partClass(...classes),
+	"data-commerce-part": name
+});
+/** The host's label for `state`, or `fallback` when the host gave none or it renders nothing. */
+function renderLabel(label, state, fallback) {
+	if (typeof label === "function") {
+		const content = label(state);
+		return hasChildren(content) ? content : fallback;
+	}
+	return hasChildren(label) ? label : fallback;
+}
+/**
+* Counts the parts mounted under a root, by key. Parts register in an effect, and a parent's effects run after its
+* children's, so the root can read `has` in its own effect. `onChange` must be stable; it runs after each change.
+*/
+function usePartRegistry(onChange) {
+	const counts = useRef(/* @__PURE__ */ new Map());
+	const has = useCallback((key) => counts.current.has(key), []);
+	const register = useCallback((key) => {
+		counts.current.set(key, (counts.current.get(key) ?? 0) + 1);
+		onChange?.(has);
+		return () => {
+			const count = (counts.current.get(key) ?? 1) - 1;
+			if (count > 0) counts.current.set(key, count);
+			else counts.current.delete(key);
+			onChange?.(has);
+		};
+	}, [has, onChange]);
+	return useMemo(() => ({
+		register,
+		has
+	}), [register, has]);
+}
 
 //#endregion
 //#region src/storefront-surface.tsx
@@ -647,15 +873,18 @@ function CommerceStatus() {
 	if (connection === "ready") return null;
 	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "unbound" ? /* @__PURE__ */ jsx("p", {
 		role: "status",
+		className: "text-sm text-commerce-muted",
 		children: "Connect a store to show products."
 	}) : connection === "loading" || connection === "connecting" ? /* @__PURE__ */ jsx("p", {
 		role: "status",
+		className: "text-sm text-commerce-muted",
 		children: "Connecting to the store…"
 	}) : /* @__PURE__ */ jsxs("div", {
 		role: "alert",
+		className: errorNoticeClass,
 		children: [/* @__PURE__ */ jsx("p", { children: connectionError }), /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: "min-h-11 underline",
+			className: errorActionClass,
 			onClick: retryConnection,
 			children: "Retry connection"
 		})]
@@ -664,24 +893,51 @@ function CommerceStatus() {
 
 //#endregion
 //#region src/cart.tsx
-const buttonClass = "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-commerce-accent px-5 py-2 text-sm font-semibold text-commerce-on-accent hover:bg-commerce-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-700 disabled:hover:bg-neutral-200";
-const inputClass = "min-h-11 rounded-lg border border-neutral-400 bg-white px-3 py-2 text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900";
-function CartButton() {
+/**
+* Opens the cart drawer: a bag icon with a count badge that pops when the count changes. Its accessible name is
+* "Cart, 2 items". With `children`, a labeled button instead.
+*/
+function CartButton({ children } = {}) {
 	const { setOpen, open, connection } = useCommerce();
 	const { itemCount } = useCart();
+	const [bump, setBump] = useState(0);
+	const previous = useRef(itemCount);
+	useEffect(() => {
+		if (previous.current !== itemCount) setBump((count) => count + 1);
+		previous.current = itemCount;
+	}, [itemCount]);
+	const custom = renderLabel(children, { itemCount }, null);
 	return /* @__PURE__ */ jsx(StorefrontSurface, {
 		className: "commerce-inline",
-		children: /* @__PURE__ */ jsxs("button", {
+		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: buttonClass,
+			className: `relative inline-flex min-h-11 items-center justify-center gap-2 rounded-full text-sm font-medium transition-colors hover:bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:cursor-not-allowed disabled:text-commerce-muted disabled:hover:bg-transparent ${custom === null ? "min-w-11" : "px-4"}`,
 			disabled: connection !== "ready" && connection !== "unbound",
 			"aria-haspopup": "dialog",
 			"aria-expanded": open,
+			"aria-label": custom === null ? `Cart, ${itemCount} ${itemCount === 1 ? "item" : "items"}` : void 0,
+			"data-commerce-part": "cart-button",
 			onClick: () => setOpen(true),
-			children: ["Cart ", /* @__PURE__ */ jsx("span", {
-				className: "rounded-full bg-white px-2 py-0.5 text-xs text-neutral-900",
+			children: custom ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BagIcon, {}), itemCount > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "absolute right-0 top-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-commerce-accent px-1 text-[11px] font-semibold tabular-nums text-commerce-on-accent motion-safe:animate-commerce-pop",
 				children: itemCount
-			})]
+			}, bump)] })
+		})
+	});
+}
+function BagIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 20 20",
+		className: "h-5 w-5 shrink-0",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4.5 6.5h11l-.8 9.1a1.5 1.5 0 0 1-1.5 1.4H6.8a1.5 1.5 0 0 1-1.5-1.4L4.5 6.5ZM7.5 6.5V6a2.5 2.5 0 0 1 5 0v.5",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
 		})
 	});
 }
@@ -693,7 +949,17 @@ function quantityProblem(quantity, available) {
 	if (available !== null && available > 0 && quantity > available) return `Only ${available} available.`;
 	return null;
 }
-function AddToCartButton({ sku, name, quantity = 1 }) {
+function AddToCartButton(props) {
+	return /* @__PURE__ */ jsx(AddToCart, {
+		...props,
+		className: buttonClass
+	});
+}
+/**
+* `AddToCartButton` with the package's button style chosen by the caller, such as the quieter card style. `block`
+* fills the container's width; the public button stays inline wherever a host places it.
+*/
+function AddToCart({ sku, name, quantity = 1, children, className, block = false, label, labelName }) {
 	const { addItem, pending, hydrating, error, open, connection } = useCommerce();
 	const [adding, setAdding] = useState(false);
 	const reasonId = useId();
@@ -706,6 +972,10 @@ function AddToCartButton({ sku, name, quantity = 1 }) {
 	else if (!sku.id) reason = "This item cannot be added to the cart.";
 	else if (!soldOut) reason = hydrating ? "Loading your cart…" : quantityProblem(quantity, available);
 	const disabled = adding || soldOut || reason !== null;
+	const ownLabel = !!labelName && !soldOut && !adding && renderLabel(children, {
+		busy: false,
+		soldOut
+	}, null) === null;
 	async function handleAdd() {
 		if (disabled || pending || !sku.id) return;
 		setAdding(true);
@@ -720,17 +990,22 @@ function AddToCartButton({ sku, name, quantity = 1 }) {
 		}
 	}
 	return /* @__PURE__ */ jsxs(StorefrontSurface, {
-		className: "commerce-inline",
+		className: block ? "" : "commerce-inline",
 		children: [
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: `${buttonClass} w-full`,
+				className: `${className} w-full`,
 				disabled,
 				"aria-disabled": disabled || pending,
 				"aria-busy": adding,
 				"aria-describedby": reason ? reasonId : void 0,
+				"aria-label": ownLabel ? labelName : void 0,
+				"data-commerce-part": "add-to-cart-button",
 				onClick: () => void handleAdd(),
-				children: soldOut ? "Out of stock" : adding ? "Adding…" : "Add to cart"
+				children: renderLabel(children, {
+					busy: adding,
+					soldOut
+				}, soldOut ? "Out of stock" : adding ? "Adding…" : label ?? "Add to cart")
 			}),
 			reason && /* @__PURE__ */ jsx("span", {
 				id: reasonId,
@@ -739,43 +1014,13 @@ function AddToCartButton({ sku, name, quantity = 1 }) {
 			}),
 			error && !open && /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "mt-3 bg-white text-sm text-red-700",
+				className: `mt-3 ${errorNoticeClass}`,
 				children: error
 			})
 		]
 	});
 }
 
-//#endregion
-//#region src/part.ts
-/** Whether `children` renders anything, so `{custom && <Part />}` with `custom` false falls back to the default. */
-const hasChildren = (children) => Children.toArray(children).some((child) => child !== "");
-const cx = (...classes) => classes.filter(Boolean).join(" ");
-/** Classes for the element that receives a part's `className`. The package CSS reset skips `commerce-part`. */
-const partClass = (...classes) => cx("commerce-part", ...classes);
-/**
-* Counts the parts mounted under a root, by key. Parts register in an effect, and a parent's effects run after its
-* children's, so the root can read `has` in its own effect. `onChange` must be stable; it runs after each change.
-*/
-function usePartRegistry(onChange) {
-	const counts = useRef(/* @__PURE__ */ new Map());
-	const has = useCallback((key) => counts.current.has(key), []);
-	const register = useCallback((key) => {
-		counts.current.set(key, (counts.current.get(key) ?? 0) + 1);
-		onChange?.(has);
-		return () => {
-			const count = (counts.current.get(key) ?? 1) - 1;
-			if (count > 0) counts.current.set(key, count);
-			else counts.current.delete(key);
-			onChange?.(has);
-		};
-	}, [has, onChange]);
-	return useMemo(() => ({
-		register,
-		has
-	}), [register, has]);
-}
-
 //#endregion
 //#region src/cart-parts.tsx
 const CartContext = createContext(null);
@@ -825,11 +1070,11 @@ function CartRoot({ children, className }) {
 	const { connection } = useCommerce();
 	const isSample = connection === "unbound";
 	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" || isSample ? /* @__PURE__ */ jsx(CartProvider, { children: /* @__PURE__ */ jsx("section", {
-		className: partClass(className),
+		...partProps("cart-root", className),
 		"data-commerce-source": isSample ? "sample" : void 0,
 		children
 	}) }) : /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-root", className),
 		children: /* @__PURE__ */ jsx(CommerceStatus, {})
 	}) });
 }
@@ -851,12 +1096,12 @@ function CartDrawerRoot({ children, className }) {
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange: setOpen,
-		children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(StorefrontSurface, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-neutral-950/40" }), /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(StorefrontSurface, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-neutral-950/40 motion-safe:animate-commerce-fade-in" }), /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none fixed inset-0 z-50 flex justify-end",
 			children: /* @__PURE__ */ jsx(Dialog.Content, {
 				"data-commerce-source": connection === "unbound" ? "sample" : void 0,
 				...described ? {} : { "aria-describedby": void 0 },
-				className: partClass("pointer-events-auto", className),
+				...partProps("cart-drawer-root", "pointer-events-auto", className),
 				onCloseAutoFocus: (event) => {
 					event.preventDefault();
 					restoreFocus();
@@ -869,32 +1114,42 @@ function CartDrawerRoot({ children, className }) {
 		})] }) })
 	});
 }
-/** "Your cart", or "Sample cart" before a store is connected, as an H2. In the drawer it names the dialog. */
-function CartTitle({ className }) {
-	const { isSample } = useCartInternal("CartTitle");
+/**
+* "Your cart", or "Sample cart" before a store is connected, as an H2, with the item count once there are items.
+* In the drawer it names the dialog.
+*/
+function CartTitle({ className, children }) {
+	const { isSample, itemCount } = useCartInternal("CartTitle");
 	const Heading = useContext(CartDrawerContext) ? Dialog.Title : "h2";
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-title", className),
 		children: /* @__PURE__ */ jsx(Heading, {
-			className: "text-2xl font-semibold",
-			children: isSample ? "Sample cart" : "Your cart"
+			className: "text-lg font-semibold tracking-tight",
+			children: renderLabel(children, { isSample }, /* @__PURE__ */ jsxs(Fragment$1, { children: [isSample ? "Sample cart" : "Your cart", itemCount > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "font-normal text-commerce-muted",
+				children: [
+					" (",
+					itemCount,
+					")"
+				]
+			})] }))
 		})
 	});
 }
 /** One line about the cart. In the drawer it describes the dialog. */
-function CartDescription({ className }) {
+function CartDescription({ className, children }) {
 	const { isSample } = useCartInternal("CartDescription");
 	const drawer = useContext(CartDrawerContext);
 	const register = drawer?.register;
 	useEffect(() => register?.("description"), [register]);
-	const text = isSample ? "Example products and prices in USD. Nothing can be purchased." : "Review your items before checkout.";
+	const text = renderLabel(children, { isSample }, isSample ? "Example products and prices in USD. Nothing can be purchased." : "Review your items before checkout.");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-description", className),
 		children: drawer ? /* @__PURE__ */ jsx(Dialog.Description, {
-			className: "text-sm text-neutral-600",
+			className: "text-sm text-commerce-muted",
 			children: text
 		}) : /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-neutral-600",
+			className: "text-sm text-commerce-muted",
 			children: text
 		})
 	});
@@ -904,11 +1159,22 @@ function CartClose({ className }) {
 	useCartInternal("CartClose");
 	if (!useContext(CartDrawerContext)) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-close", className),
 		children: /* @__PURE__ */ jsx(Dialog.Close, {
-			className: "min-h-11 min-w-11 rounded-lg border border-neutral-400 bg-white px-3 text-neutral-900 focus-visible:outline focus-visible:outline-2",
+			className: "inline-flex min-h-11 min-w-11 items-center justify-center rounded-full text-commerce-muted transition-colors hover:bg-commerce-tint hover:text-inherit focus-visible:outline focus-visible:outline-2 focus-visible:outline-current",
 			"aria-label": "Close cart",
-			children: "✕"
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 20 20",
+				className: "h-5 w-5",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M5 5l10 10M15 5L5 15",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round"
+				})
+			})
 		})
 	});
 }
@@ -917,19 +1183,19 @@ function CartNotices({ className }) {
 	const { storageWarning, error, action, locked, run, refresh } = useCartInternal("CartNotices");
 	if (!storageWarning && !error) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-notices", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-4",
 			children: [storageWarning && /* @__PURE__ */ jsx("p", {
 				role: "status",
-				className: "text-sm text-amber-800",
+				className: "rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-900",
 				children: storageWarning
 			}), error && /* @__PURE__ */ jsxs("div", {
 				role: "alert",
-				className: "rounded-lg bg-red-50 p-4 text-red-800",
+				className: errorNoticeClass,
 				children: [/* @__PURE__ */ jsx("p", { children: error }), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "mt-2 min-h-11 bg-red-50 text-red-800 underline disabled:cursor-not-allowed",
+					className: errorActionClass,
 					disabled: action === "refresh",
 					"aria-disabled": locked,
 					"aria-busy": action === "refresh",
@@ -969,10 +1235,11 @@ function CartItems({ className, children }) {
 		value: registry.register,
 		children: [hydrating && /* @__PURE__ */ jsx("p", {
 			role: "status",
+			className: "py-4 text-sm text-commerce-muted",
 			children: "Loading your cart…"
 		}), /* @__PURE__ */ jsx("div", {
 			role: "list",
-			className: partClass(className),
+			...partProps("cart-items", className),
 			children: items.map((item, index) => /* @__PURE__ */ jsx(CartItemsContext.Provider, {
 				value: item,
 				children: template
@@ -990,7 +1257,7 @@ function CartItemRoot({ children, className }) {
 		value: item,
 		children: /* @__PURE__ */ jsx("div", {
 			role: "listitem",
-			className: partClass(className),
+			...partProps("cart-item-root", className),
 			"data-testid": "cart-item",
 			children: /* @__PURE__ */ jsx(CartItemsContext.Provider, {
 				value: null,
@@ -1004,11 +1271,11 @@ function CartItemImage({ className }) {
 	const { imageUrl } = useCartItemInternal("CartItemImage");
 	if (!imageUrl) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-item-image", className),
 		children: /* @__PURE__ */ jsx("img", {
 			src: imageUrl,
 			alt: "",
-			className: "h-20 w-20 rounded-lg bg-neutral-100 object-cover"
+			className: "h-20 w-20 bg-commerce-tint object-cover"
 		})
 	});
 }
@@ -1016,62 +1283,79 @@ function CartItemImage({ className }) {
 function CartItemName({ className }) {
 	const { name } = useCartItemInternal("CartItemName");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-item-name", className),
 		children: /* @__PURE__ */ jsx("h3", {
-			className: "font-semibold",
+			className: "break-words text-sm font-medium leading-6",
 			children: name
 		})
 	});
 }
-/** The selected options, one per line, such as "Color: Blue". Renders nothing without options. */
+/** The selected options on one line, such as "Color: Blue · Size: M". Renders nothing without options. */
 function CartItemOptions({ className }) {
 	const { options } = useCartItemInternal("CartItemOptions");
 	if (!options.length) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: options.map((option) => /* @__PURE__ */ jsxs("p", {
-			className: "text-sm text-neutral-600",
-			children: [
+		...partProps("cart-item-options", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-commerce-muted",
+			children: options.map((option, index) => /* @__PURE__ */ jsxs("span", { children: [
+				index > 0 && " · ",
 				option.attribute,
 				": ",
 				option.values.join(", ")
-			]
-		}, `${option.attribute}:${option.values.join(",")}`))
+			] }, `${option.attribute}:${option.values.join(",")}`))
+		})
 	});
 }
 /** The line total. */
 function CartItemPrice({ className }) {
 	const { subtotal, currency } = useCartItemInternal("CartItemPrice");
+	const money$1 = useMoney();
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-item-price", className),
 		children: /* @__PURE__ */ jsx("p", {
-			className: "text-sm",
-			children: subtotal === null ? "Price unavailable" : money(subtotal, currency)
+			className: "text-sm leading-6 tabular-nums",
+			children: subtotal === null ? "Price unavailable" : money$1(subtotal, currency)
+		})
+	});
+}
+const stepperButtonClass$1 = "inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg transition-colors hover:bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-current disabled:cursor-not-allowed disabled:text-commerce-muted disabled:hover:bg-transparent";
+function StepperIcon$1({ plus }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		className: "h-4 w-4",
+		children: /* @__PURE__ */ jsx("path", {
+			d: plus ? "M3.5 8h9M8 3.5v9" : "M3.5 8h9",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
 		})
 	});
 }
-const stepperButtonClass = "min-h-11 min-w-11 rounded-lg bg-white text-neutral-900 focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600";
 /** Decrease and increase buttons around the line's quantity. */
 function CartItemQuantity({ className }) {
 	const { id, name, quantity } = useCartItemInternal("CartItemQuantity");
 	const { action, locked, run, changeQuantity } = useCartInternal("CartItemQuantity");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-item-quantity", className),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center rounded-lg border border-neutral-300",
+			className: "inline-flex items-center rounded-lg border border-commerce-edge",
 			children: [
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: stepperButtonClass,
+					className: stepperButtonClass$1,
 					"aria-label": `Decrease quantity of ${name}`,
+					"data-commerce-control": "decrease",
 					disabled: action === `decrease:${id}` || !id || quantity <= 1,
 					"aria-disabled": locked || !id || quantity <= 1,
 					"aria-busy": action === `decrease:${id}`,
 					onClick: () => run(`decrease:${id}`, () => changeQuantity(id, quantity - 1)),
-					children: "−"
+					children: /* @__PURE__ */ jsx(StepperIcon$1, {})
 				}),
 				/* @__PURE__ */ jsxs("span", {
-					className: "min-w-8 text-center",
+					className: "min-w-8 text-center text-sm tabular-nums",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "sr-only",
 						children: "Quantity: "
@@ -1079,51 +1363,53 @@ function CartItemQuantity({ className }) {
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: stepperButtonClass,
+					className: stepperButtonClass$1,
 					"aria-label": `Increase quantity of ${name}`,
+					"data-commerce-control": "increase",
 					disabled: action === `increase:${id}` || !id,
 					"aria-disabled": locked || !id,
 					"aria-busy": action === `increase:${id}`,
 					onClick: () => run(`increase:${id}`, () => changeQuantity(id, quantity + 1)),
-					children: "+"
+					children: /* @__PURE__ */ jsx(StepperIcon$1, { plus: true })
 				})
 			]
 		})
 	});
 }
 /** Removes the line. */
-function CartItemRemove({ className }) {
+function CartItemRemove({ className, children }) {
 	const { id, name } = useCartItemInternal("CartItemRemove");
 	const { action, locked, run, removeItem } = useCartInternal("CartItemRemove");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: /* @__PURE__ */ jsx("button", {
+		...partProps("cart-item-remove", className),
+		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "min-h-11 bg-white px-2 text-sm text-neutral-900 underline focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:text-neutral-600",
-			"aria-label": `Remove ${name}`,
+			className: "min-h-11 rounded-sm px-1 text-sm text-commerce-muted underline-offset-4 transition-colors hover:text-inherit hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-current disabled:cursor-not-allowed disabled:hover:no-underline",
 			disabled: action === `remove:${id}` || !id,
 			"aria-disabled": locked || !id,
 			"aria-busy": action === `remove:${id}`,
 			onClick: () => run(`remove:${id}`, () => removeItem(id)),
-			children: "Remove"
+			children: [renderLabel(children, { busy: action === `remove:${id}` }, "Remove"), /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [" ", name]
+			})]
 		})
 	});
 }
 const packagedItem = /* @__PURE__ */ jsxs(CartItemRoot, {
-	className: "py-5 first:pt-0",
-	children: [/* @__PURE__ */ jsxs("div", {
-		className: "flex gap-4",
-		children: [/* @__PURE__ */ jsx(CartItemImage, {}), /* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
-			children: [
-				/* @__PURE__ */ jsx(CartItemName, {}),
-				/* @__PURE__ */ jsx(CartItemOptions, {}),
-				/* @__PURE__ */ jsx(CartItemPrice, { className: "mt-1" })
-			]
+	className: "flex gap-4 py-5",
+	children: [/* @__PURE__ */ jsx(CartItemImage, { className: "shrink-0" }), /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx(CartItemName, {}), /* @__PURE__ */ jsx(CartItemOptions, {})]
+			}), /* @__PURE__ */ jsx(CartItemPrice, { className: "shrink-0" })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx(CartItemQuantity, {}), /* @__PURE__ */ jsx(CartItemRemove, {})]
 		})]
-	}), /* @__PURE__ */ jsxs("div", {
-		className: "mt-4 flex items-center justify-between gap-2",
-		children: [/* @__PURE__ */ jsx(CartItemQuantity, {}), /* @__PURE__ */ jsx(CartItemRemove, {})]
 	})]
 });
 /** Renders only when the cart is empty: a message and a link to the catalog, or its children. */
@@ -1131,18 +1417,34 @@ function CartEmpty({ className, children }) {
 	const { items, hydrating, isSample, catalogPath, close } = useCartInternal("CartEmpty");
 	if (hydrating || items.length) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: hasChildren(children) ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+		...partProps("cart-empty", className),
+		children: hasChildren(children) ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-commerce-tint text-commerce-muted",
+				children: /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 20 20",
+					className: "h-6 w-6",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M4.5 6.5h11l-.8 9.1a1.5 1.5 0 0 1-1.5 1.4H6.8a1.5 1.5 0 0 1-1.5-1.4L4.5 6.5ZM7.5 6.5V6a2.5 2.5 0 0 1 5 0v.5",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				})
+			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-xl font-medium",
+				className: "text-base font-semibold",
 				children: "Your cart is empty"
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "mt-2 text-neutral-600",
-				children: isSample ? "Add a sample product to try the cart." : "Find something you love in the shop."
+				className: "mt-1 text-sm text-commerce-muted",
+				children: isSample ? "Add a sample product to try the cart." : "Add something you love and it will show up here."
 			}),
 			/* @__PURE__ */ jsx(Link, {
-				className: `${buttonClass} mt-6`,
+				className: `${secondaryButtonClass} mt-6`,
 				to: catalogPath,
 				onClick: close,
 				children: "Browse products"
@@ -1155,37 +1457,38 @@ function CartSummary({ className, children }) {
 	const { items } = useCartInternal("CartSummary");
 	if (!items.length) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-summary", className),
 		children
 	});
 }
 /** The subtotal, labeled "Sample subtotal" for samples. Renders nothing until the server prices the cart. */
 function CartSubtotal({ className }) {
 	const { items, subtotal, currency, isSample } = useCartInternal("CartSubtotal");
+	const money$1 = useMoney();
 	if (!items.length || subtotal === null) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: /* @__PURE__ */ jsx("dl", {
-			className: "space-y-2 text-sm",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between",
-				children: [/* @__PURE__ */ jsx("dt", { children: isSample ? "Sample subtotal" : "Subtotal" }), /* @__PURE__ */ jsx("dd", { children: money(subtotal, currency) })]
-			})
-		})
+		...partProps("cart-subtotal", className),
+		children: /* @__PURE__ */ jsx("dl", { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between gap-4 font-semibold",
+			children: [/* @__PURE__ */ jsx("dt", { children: isSample ? "Sample subtotal" : "Subtotal" }), /* @__PURE__ */ jsx("dd", {
+				className: "tabular-nums",
+				children: money$1(subtotal, currency)
+			})]
+		}) })
 	});
 }
 /**
-* "Shipping, taxes, and discounts are calculated at checkout." Has the stable
+* A row under the subtotal: "Shipping, taxes & discounts", "Calculated at checkout". Has the stable
 * `commerce-cart-checkout-adjustments-note` class. Renders nothing for samples or an empty cart.
 */
 function CartCheckoutNote({ className }) {
 	const { items, isSample } = useCartInternal("CartCheckoutNote");
 	if (isSample || !items.length) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass("commerce-cart-checkout-adjustments-note", className),
-		children: /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-neutral-600",
-			children: "Shipping, taxes, and discounts are calculated at checkout."
+		...partProps("cart-checkout-note", "commerce-cart-checkout-adjustments-note", className),
+		children: /* @__PURE__ */ jsxs("dl", {
+			className: "flex justify-between gap-4 text-sm text-commerce-muted",
+			children: [/* @__PURE__ */ jsx("dt", { children: "Shipping, taxes & discounts" }), /* @__PURE__ */ jsx("dd", { children: "Calculated at checkout" })]
 		})
 	});
 }
@@ -1193,16 +1496,16 @@ function CartCheckoutNote({ className }) {
 * The checkout button when `checkoutSuccessPath` is set; otherwise a message that checkout is unavailable.
 * Samples never check out. Renders nothing for an empty cart.
 */
-function CartCheckout({ className }) {
+function CartCheckout({ className, children }) {
 	const { items, isSample, checkoutEnabled, checkoutReady, hydrating, action, locked, run, checkout } = useCartInternal("CartCheckout");
 	if (!items.length) return null;
 	let content;
 	if (isSample) content = /* @__PURE__ */ jsx("p", {
-		className: "text-sm text-neutral-600",
+		className: "text-sm text-commerce-muted",
 		children: "Example total in USD. Checkout is not set up yet."
 	});
 	else if (!checkoutEnabled) content = /* @__PURE__ */ jsx("p", {
-		className: "text-sm text-neutral-600",
+		className: "text-sm text-commerce-muted",
 		children: "Checkout is not available yet."
 	});
 	else content = /* @__PURE__ */ jsx("button", {
@@ -1212,36 +1515,66 @@ function CartCheckout({ className }) {
 		"aria-disabled": locked || !checkoutReady,
 		"aria-busy": action === "checkout",
 		onClick: () => run("checkout", checkout),
-		children: action === "checkout" ? "Opening checkout…" : "Proceed to Checkout"
+		children: renderLabel(children, { busy: action === "checkout" }, action === "checkout" ? "Opening checkout…" : "Proceed to checkout")
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("cart-checkout", className),
 		children: content
 	});
 }
+/**
+* "Continue shopping": closes the drawer, or on a cart page links to the catalog. Renders nothing for an empty cart,
+* whose `CartEmpty` links to the catalog.
+*/
+function CartContinueShopping({ className, children }) {
+	const { items, isSample, catalogPath } = useCartInternal("CartContinueShopping");
+	const inDrawer = !!useContext(CartDrawerContext);
+	if (!items.length) return null;
+	const label = renderLabel(children, { isSample }, "Continue shopping");
+	const linkClass = "inline-flex min-h-11 w-full items-center justify-center rounded-lg px-5 py-2 text-sm font-medium transition-colors hover:bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current";
+	return /* @__PURE__ */ jsx("div", {
+		...partProps("cart-continue-shopping", className),
+		children: inDrawer ? /* @__PURE__ */ jsx(Dialog.Close, {
+			className: linkClass,
+			children: label
+		}) : /* @__PURE__ */ jsx(Link, {
+			className: linkClass,
+			to: catalogPath,
+			children: label
+		})
+	});
+}
+function SampleDescription({ className }) {
+	const { isSample } = useCartInternal("CartDescription");
+	return isSample ? /* @__PURE__ */ jsx(CartDescription, { className }) : null;
+}
 /** The packaged cart drawer. Compose `CartDrawerRoot` and the cart parts for a custom drawer. */
 function CartDrawer() {
 	return /* @__PURE__ */ jsxs(CartDrawerRoot, {
-		className: "flex w-full max-w-lg flex-col bg-white text-neutral-900 shadow-xl",
+		className: "flex w-full max-w-md flex-col bg-white text-neutral-900 shadow-2xl motion-safe:animate-commerce-drawer-in",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between border-b border-neutral-200 p-6",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CartTitle, {}), /* @__PURE__ */ jsx(CartDescription, { className: "mt-1" })] }), /* @__PURE__ */ jsx(CartClose, {})]
+				className: "flex items-start justify-between gap-4 border-b border-commerce-line py-3 pl-6 pr-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 pt-2.5",
+					children: [/* @__PURE__ */ jsx(CartTitle, {}), /* @__PURE__ */ jsx(SampleDescription, { className: "mt-0.5" })]
+				}), /* @__PURE__ */ jsx(CartClose, {})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex-1 overflow-y-auto p-6",
+				className: "flex-1 overflow-y-auto px-6",
 				children: [
-					/* @__PURE__ */ jsx(CartNotices, { className: "mb-4" }),
-					/* @__PURE__ */ jsx(CartItems, { className: "divide-y divide-neutral-200" }),
-					/* @__PURE__ */ jsx(CartEmpty, { className: "py-16 text-center" })
+					/* @__PURE__ */ jsx(CartNotices, { className: "mt-6" }),
+					/* @__PURE__ */ jsx(CartItems, { className: "divide-y divide-commerce-line" }),
+					/* @__PURE__ */ jsx(CartEmpty, { className: "py-20 text-center" })
 				]
 			}),
 			/* @__PURE__ */ jsxs(CartSummary, {
-				className: "border-t border-neutral-200 p-6",
+				className: "border-t border-commerce-line px-6 pb-6 pt-4",
 				children: [
 					/* @__PURE__ */ jsx(CartSubtotal, {}),
-					/* @__PURE__ */ jsx(CartCheckoutNote, { className: "mt-3" }),
-					/* @__PURE__ */ jsx(CartCheckout, {})
+					/* @__PURE__ */ jsx(CartCheckoutNote, { className: "mt-1" }),
+					/* @__PURE__ */ jsx(CartCheckout, { className: "mt-5" }),
+					/* @__PURE__ */ jsx(CartContinueShopping, { className: "mt-2" })
 				]
 			})
 		]
@@ -1250,16 +1583,20 @@ function CartDrawer() {
 
 //#endregion
 //#region src/product-card.tsx
+/**
+* A product image that fills its container, with a labeled placeholder when there is no URL or it fails to load.
+* Use it in custom parts so they handle missing images like the package's own.
+*/
 function ProductImage({ url, name, className = "" }) {
-	const [failed, setFailed] = useState(false);
-	return url && !failed ? /* @__PURE__ */ jsx("img", {
+	const [failedUrl, setFailedUrl] = useState(null);
+	return url && url !== failedUrl ? /* @__PURE__ */ jsx("img", {
 		src: url,
 		alt: name,
 		loading: "lazy",
 		className: `h-full w-full object-cover ${className}`,
-		onError: () => setFailed(true)
+		onError: () => setFailedUrl(url)
 	}) : /* @__PURE__ */ jsx("div", {
-		className: `flex h-full min-h-44 items-center justify-center p-6 text-center ${className}`,
+		className: `flex h-full min-h-44 items-center justify-center bg-commerce-tint p-6 text-center text-sm text-commerce-muted ${className}`,
 		role: "img",
 		"aria-label": `${name}: image unavailable`,
 		children: "No image available"
@@ -1338,7 +1675,7 @@ function ProductCardRoot({ children, product, className }) {
 	const card = /* @__PURE__ */ jsx(ProductCardContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx("article", {
-			className: partClass("group", className),
+			...partProps("product-card-root", "group", className),
 			children: /* @__PURE__ */ jsx(CatalogItemContext.Provider, {
 				value: null,
 				children
@@ -1354,21 +1691,21 @@ function ProductCardRoot({ children, product, className }) {
 function ProductCardImage({ className }) {
 	const card = useProductCardInternal("ProductCardImage");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-card-image", className),
 		children: card.source === "live" ? /* @__PURE__ */ jsx(Link, {
 			to: card.href,
 			tabIndex: card.imageLinked ? void 0 : -1,
 			"aria-hidden": card.imageLinked ? void 0 : "true",
-			className: "block aspect-square overflow-hidden focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4",
+			className: "block aspect-square overflow-hidden bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
 			children: /* @__PURE__ */ jsx(ProductImage, {
 				url: getPrimaryImageUrl(card.product),
 				name: card.name,
-				className: "motion-safe:transition-transform motion-safe:duration-200 motion-safe:group-hover:scale-105"
+				className: "motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out motion-safe:group-hover:scale-[1.03]"
 			})
 		}) : /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "flex aspect-square items-center justify-center bg-neutral-100",
-			children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 rounded-lg border border-neutral-300" })
+			className: "flex aspect-square items-center justify-center bg-commerce-tint",
+			children: /* @__PURE__ */ jsx("div", { className: "h-16 w-16 rounded-full border border-commerce-line" })
 		})
 	});
 }
@@ -1377,11 +1714,11 @@ function ProductCardTitle({ className }) {
 	const { name, href, register } = useProductCardInternal("ProductCardTitle");
 	useEffect(() => href ? register(titleLink) : void 0, [href, register]);
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-card-title", className),
 		children: /* @__PURE__ */ jsx("h2", {
-			className: "break-words text-2xl font-semibold leading-tight",
+			className: "break-words text-base font-medium leading-6",
 			children: href ? /* @__PURE__ */ jsx(Link, {
-				className: "rounded text-inherit hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+				className: "rounded-sm text-inherit underline-offset-4 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
 				to: href,
 				children: name
 			}) : name
@@ -1393,85 +1730,195 @@ function ProductCardDescription({ className }) {
 	const { product } = useProductCardInternal("ProductCardDescription");
 	if (!product?.description) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-card-description", className),
 		children: /* @__PURE__ */ jsx("p", {
-			className: "line-clamp-3 text-sm leading-6",
+			className: "line-clamp-2 text-sm leading-6 text-commerce-muted",
 			children: product.description
 		})
 	});
 }
-/** The product's price, or its price range when variants differ. */
+const formatRange = (range, money$1) => {
+	const min = range?.min;
+	const max = range?.max;
+	if (typeof min !== "number") return null;
+	return `${money$1(min)}${typeof max === "number" && max !== min ? ` – ${money$1(max)}` : ""}`;
+};
+/**
+* "Sale" when some SKU's compare-at price is above that SKU's price. Without SKU prices, as in the catalog list, only
+* when the lowest compare-at price is above the highest price. Renders nothing otherwise, or for samples.
+*/
+function ProductCardBadge({ className }) {
+	const { product } = useProductCardInternal("ProductCardBadge");
+	if (!isProductOnSale(product)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...partProps("product-card-badge", className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: saleBadgeClass,
+			children: "Sale"
+		})
+	});
+}
+/** The product's price, or its price range when variants differ. A single price on sale shows its compare-at price. */
 function ProductCardPrice({ className }) {
 	const card = useProductCardInternal("ProductCardPrice");
-	const { config } = useCommerce();
-	let text;
-	if (card.source === "sample") text = money(card.sample.price, "USD");
-	else {
-		const min = card.product.priceRange?.min;
-		const max = card.product.priceRange?.max;
-		text = typeof min === "number" ? `${money(min, config.currencyCode)}${typeof max === "number" && max !== min ? ` – ${money(max, config.currencyCode)}` : ""}` : "Price unavailable";
-	}
+	const money$1 = useMoney();
+	const text = card.source === "sample" ? money$1(card.sample.price, "USD") : formatRange(card.product.priceRange, money$1) ?? "Price unavailable";
+	const range = card.source === "live" ? card.product.priceRange : null;
+	const starting = card.source === "live" && range?.min === range?.max ? getStartingCompareAt(card.product) : null;
+	const compareAt = starting === null ? null : money$1(starting);
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: /* @__PURE__ */ jsx("p", {
-			className: "text-lg font-semibold leading-7",
-			children: text
+		...partProps("product-card-price", className),
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "flex flex-wrap items-baseline gap-x-2 text-sm leading-6 tabular-nums",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: text
+			}), compareAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Was"
+			}), /* @__PURE__ */ jsx("del", {
+				className: "text-commerce-muted",
+				children: compareAt
+			})] })]
 		})
 	});
 }
 /**
+* Dots for the first attribute whose values all have a swatch from the provider's `getSwatch`, such as colors.
+* Renders nothing without `getSwatch`, for samples, or when no attribute has swatches.
+*/
+function ProductCardSwatches({ className }) {
+	const { product } = useProductCardInternal("ProductCardSwatches");
+	const { getSwatch } = useCommerce();
+	if (!getSwatch || !product) return null;
+	for (const attribute of getProductAttributes(product)) {
+		const swatches = attribute.values.map((value) => ({
+			...value,
+			background: getSwatch({
+				attribute: attribute.name,
+				name: value.name,
+				label: value.label
+			})
+		}));
+		if (!swatches.length || swatches.some((swatch) => !swatch.background)) continue;
+		const shown = swatches.slice(0, 5);
+		return /* @__PURE__ */ jsx("div", {
+			...partProps("product-card-swatches", className),
+			children: /* @__PURE__ */ jsxs("p", {
+				className: "flex items-center gap-1.5 text-xs text-commerce-muted",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [
+							swatches.length,
+							" ",
+							inSentence(attribute.label),
+							" options:",
+							" ",
+							swatches.map((swatch) => swatch.label).join(", ")
+						]
+					}),
+					shown.map((swatch) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "h-3.5 w-3.5 rounded-full border border-commerce-edge",
+						style: { background: swatch.background ?? void 0 }
+					}, swatch.name)),
+					swatches.length > shown.length && /* @__PURE__ */ jsxs("span", {
+						"aria-hidden": "true",
+						children: ["+", swatches.length - shown.length]
+					})
+				]
+			})
+		});
+	}
+	return null;
+}
+/**
 * Adds the product directly when it has exactly one SKU and no options; otherwise links to its page to choose.
 * Samples add to the sample cart.
 */
-function ProductCardAction({ className }) {
+function ProductCardAction({ className, children }) {
 	const card = useProductCardInternal("ProductCardAction");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-card-action", className),
 		children: card.source === "live" ? /* @__PURE__ */ jsx(LiveAction, {
 			product: card.product,
 			name: card.name,
-			href: card.href
-		}) : /* @__PURE__ */ jsx(SampleAction, { sample: card.sample })
+			href: card.href,
+			label: children
+		}) : /* @__PURE__ */ jsx(SampleAction, {
+			sample: card.sample,
+			label: children
+		})
 	});
 }
-function LiveAction({ product, name, href }) {
+function LiveAction({ product, name, href, label }) {
 	const selectedSku = getSingleMatchedSku(product);
 	const hasVariants = getProductAttributes(product).length > 0;
-	if (!hasVariants && selectedSku) return /* @__PURE__ */ jsx(AddToCartButton, {
+	if (!hasVariants && selectedSku) return /* @__PURE__ */ jsx(AddToCart, {
 		sku: selectedSku,
-		name
-	});
+		name,
+		className: secondaryButtonClass,
+		block: true,
+		children: (state) => renderLabel(label, {
+			action: "add",
+			...state
+		}, null)
+	});
+	const action = hasVariants ? "choose-options" : "view-product";
 	return /* @__PURE__ */ jsx(Link, {
-		className: buttonClass,
+		className: `${secondaryButtonClass} w-full`,
 		to: href,
-		children: hasVariants ? "Choose options" : "View product"
+		children: renderLabel(label, {
+			action,
+			busy: false,
+			soldOut: false
+		}, hasVariants ? "Choose options" : "View product")
 	});
 }
-function SampleAction({ sample }) {
+function SampleAction({ sample, label }) {
 	const { add } = useSampleCart();
-	return /* @__PURE__ */ jsx("button", {
+	const custom = renderLabel(label, {
+		action: "add",
+		busy: false,
+		soldOut: false
+	}, null);
+	return custom === null ? /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: buttonClass,
+		className: `${secondaryButtonClass} w-full`,
 		"aria-label": `Add ${sample.name} to sample cart`,
 		onClick: () => add(sample.key),
 		children: "Add to cart"
+	}) : /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: `${secondaryButtonClass} w-full`,
+		onClick: () => add(sample.key),
+		children: [custom, /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [
+				" (",
+				sample.name,
+				", sample)"
+			]
+		})]
 	});
 }
-const packagedCardClass = "flex min-w-0 flex-col overflow-hidden rounded-lg border border-neutral-200";
-/** The packaged card's parts, inside a root that has `packagedCardClass`. */
+const packagedCardClass = "flex min-w-0 flex-col";
+/**
+* The packaged card's parts, inside a root that has `packagedCardClass`. No description: cards scan better without
+* it, and `ProductCardDescription` adds it back.
+*/
 function PackagedCardParts() {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProductCardImage, {}), /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-1 flex-col p-6",
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(ProductCardImage, {}), /* @__PURE__ */ jsx(ProductCardBadge, { className: "pointer-events-none absolute left-3 top-3" })]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col pt-3",
 		children: [
 			/* @__PURE__ */ jsx(ProductCardTitle, {}),
-			/* @__PURE__ */ jsx(ProductCardDescription, { className: "mt-3" }),
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-auto pt-6",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap items-end justify-between gap-4 border-t border-neutral-200 pt-5",
-					children: [/* @__PURE__ */ jsx(ProductCardPrice, { className: "min-w-0 flex-1" }), /* @__PURE__ */ jsx(ProductCardAction, { className: "max-w-full" })]
-				})
-			})
+			/* @__PURE__ */ jsx(ProductCardPrice, { className: "mt-0.5" }),
+			/* @__PURE__ */ jsx(ProductCardSwatches, { className: "mt-2" }),
+			/* @__PURE__ */ jsx(ProductCardAction, { className: "mt-auto pt-4" })
 		]
 	})] });
 }
@@ -1484,9 +1931,22 @@ function ProductCard({ product }) {
 	});
 }
 
+//#endregion
+//#region src/root-params.ts
+/**
+* A root's search params: the page URL's, or with `urlState` off, the root's own. A second root on the page, such
+* as a quick view, then neither reads nor changes the page's params, and its state ends when it unmounts.
+*/
+function useRootParams(urlState) {
+	const [urlParams, setUrlParams] = useSearchParams();
+	const [localParams, setLocalParams] = useState(() => new URLSearchParams());
+	return urlState ? [urlParams, setUrlParams] : [localParams, setLocalParams];
+}
+
 //#endregion
 //#region src/catalog.tsx
 const CatalogContext = createContext(null);
+const CatalogEmptyContext = createContext(null);
 const sampleCatalog = { source: "sample" };
 function useCatalogInternal(part) {
 	const context = useContext(CatalogContext);
@@ -1494,32 +1954,47 @@ function useCatalogInternal(part) {
 	return context;
 }
 /** Loads one cursor page of products, or the built-in samples, and provides them to catalog parts. */
-function CatalogRoot({ children, className, sampleProducts: sampleProducts$1 = false }) {
+function CatalogRoot({ children, className, sampleProducts: sampleProducts$1 = false, pageSize = 6, urlState = true }) {
 	const { connection } = useCommerce();
+	const [custom, setCustom] = useState(false);
+	const { register, has } = usePartRegistry(useCallback((registered) => setCustom(registered("empty")), []));
+	useEffect(() => {
+		setCustom(has("empty"));
+	}, [has]);
+	const empty = useMemo(() => ({
+		register,
+		custom
+	}), [register, custom]);
+	if (!Number.isSafeInteger(pageSize) || pageSize < 1) throw new Error(`CatalogRoot pageSize must be a whole number of 1 or more, not ${pageSize}.`);
 	let content;
 	if (connection === "ready") content = /* @__PURE__ */ jsx(CatalogLoader, {
 		className,
+		pageSize,
+		urlState,
 		children
 	});
 	else if (connection === "unbound" && sampleProducts$1) content = /* @__PURE__ */ jsx(CatalogContext.Provider, {
 		value: sampleCatalog,
 		children: /* @__PURE__ */ jsx("section", {
-			className: partClass(className),
+			...partProps("catalog-root", className),
 			"data-commerce-source": "sample",
 			children
 		})
 	});
 	else content = /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("catalog-root", className),
 		children: /* @__PURE__ */ jsx(CommerceStatus, {})
 	});
-	return /* @__PURE__ */ jsx(StorefrontSurface, { children: content });
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: /* @__PURE__ */ jsx(CatalogEmptyContext.Provider, {
+		value: empty,
+		children: content
+	}) });
 }
-function CatalogLoader({ children, className }) {
+function CatalogLoader({ children, className, pageSize, urlState }) {
 	const { config } = useCommerce();
-	const [params, setParams] = useSearchParams();
+	const [params, setParams] = useRootParams(urlState);
 	const after = params.get("after") ?? "";
-	const urlParams = new URLSearchParams({ first: "6" });
+	const urlParams = new URLSearchParams({ first: String(pageSize) });
 	if (after) urlParams.set("after", after);
 	const products = useQuery({
 		retry: false,
@@ -1527,6 +2002,7 @@ function CatalogLoader({ children, className }) {
 			"commerce",
 			config.cartScope,
 			"products",
+			pageSize,
 			after
 		],
 		queryFn: ({ signal }) => request(`/products?${urlParams}`, {
@@ -1556,7 +2032,7 @@ function CatalogLoader({ children, className }) {
 	return /* @__PURE__ */ jsx(CatalogContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx("section", {
-			className: partClass(className),
+			...partProps("catalog-root", className),
 			children
 		})
 	});
@@ -1565,12 +2041,12 @@ function CatalogLoader({ children, className }) {
 function CatalogHeader({ title = "Shop all products", description = "Explore the collection and find your favorites.", className }) {
 	useCatalogInternal("CatalogHeader");
 	return /* @__PURE__ */ jsxs("header", {
-		className: partClass(className),
+		...partProps("catalog-header", className),
 		children: [/* @__PURE__ */ jsx("h1", {
-			className: "max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl",
+			className: "max-w-3xl text-balance text-3xl font-semibold leading-tight tracking-tight",
 			children: title
 		}), /* @__PURE__ */ jsx("p", {
-			className: "mt-5 max-w-xl text-base leading-7 sm:text-lg",
+			className: "mt-1 max-w-xl text-base leading-7 text-commerce-muted",
 			children: description
 		})]
 	});
@@ -1579,9 +2055,9 @@ function CatalogHeader({ title = "Shop all products", description = "Explore the
 function CatalogSummary({ className }) {
 	const catalog = useCatalogInternal("CatalogSummary");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("catalog-summary", className),
 		children: /* @__PURE__ */ jsx("p", {
-			className: "text-sm",
+			className: "text-sm text-commerce-muted",
 			role: "status",
 			children: summary(catalog)
 		})
@@ -1593,6 +2069,8 @@ function summary(catalog) {
 	if (catalog.products.isError) return "Products unavailable";
 	return `Showing ${catalog.nodes.length} product${catalog.nodes.length === 1 ? "" : "s"}`;
 }
+/** Two columns on phones, then as many 240px columns as fit. Shared with `RelatedProducts`. */
+const catalogGridClass = "grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-[repeat(auto-fill,minmax(240px,1fr))] lg:gap-y-12";
 const sampleItems = sampleProducts.map((sample) => ({
 	key: sample.key,
 	item: {
@@ -1600,17 +2078,18 @@ const sampleItems = sampleProducts.map((sample) => ({
 		sample
 	}
 }));
-const packagedCard = /* @__PURE__ */ jsx(ProductCardRoot, {
+const packagedCard$1 = /* @__PURE__ */ jsx(ProductCardRoot, {
 	className: packagedCardClass,
 	children: /* @__PURE__ */ jsx(PackagedCardParts, {})
 });
 /**
 * The product cards. `className` goes on the element that contains the cards, such as a grid. While loading, that
-* element holds placeholder cards. The error with its retry and the empty message render just before it.
+* element holds placeholder cards. The error with its retry and, without a `CatalogEmpty`, the empty message render just before it.
 */
 function CatalogProducts({ className, children }) {
 	const catalog = useCatalogInternal("CatalogProducts");
-	const card = hasChildren(children) ? children : packagedCard;
+	const customEmpty = useContext(CatalogEmptyContext)?.custom ?? false;
+	const card = hasChildren(children) ? children : packagedCard$1;
 	const nodes = catalog.source === "live" ? catalog.nodes : null;
 	const items = useMemo(() => nodes ? nodes.map((product) => ({
 		key: product.id ?? "",
@@ -1620,38 +2099,38 @@ function CatalogProducts({ className, children }) {
 		}
 	})) : sampleItems, [nodes]);
 	const products = catalog.source === "live" ? catalog.products : null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		products?.isError && /* @__PURE__ */ jsxs("div", {
 			role: "alert",
-			className: "rounded-lg bg-red-50 p-5 text-red-800",
+			className: errorNoticeClass,
 			children: [/* @__PURE__ */ jsx("p", { children: message(products.error) }), /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "min-h-11 bg-red-50 text-red-800 underline",
+				className: errorActionClass,
 				onClick: () => void products.refetch(),
 				children: "Retry products"
 			})]
 		}),
-		products?.isSuccess && !items.length && /* @__PURE__ */ jsx("p", {
-			className: "py-16 text-center",
+		products?.isSuccess && !items.length && !customEmpty && /* @__PURE__ */ jsx("p", {
+			className: "py-16 text-center text-commerce-muted",
 			children: "No products available."
 		}),
 		/* @__PURE__ */ jsx("div", {
-			className: partClass(className),
+			...partProps("catalog-products", className),
 			children: products?.isPending ? [
 				0,
 				1,
 				2
 			].map((placeholder) => /* @__PURE__ */ jsxs("div", {
 				"aria-hidden": "true",
-				className: "overflow-hidden rounded-lg border border-neutral-200 motion-safe:animate-pulse",
-				children: [/* @__PURE__ */ jsx("div", { className: "aspect-square bg-neutral-100" }), /* @__PURE__ */ jsxs("div", {
-					className: "space-y-4 p-6",
-					children: [
-						/* @__PURE__ */ jsx("div", { className: "h-6 w-2/3 rounded bg-neutral-100" }),
-						/* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-neutral-100" }),
-						/* @__PURE__ */ jsx("div", { className: "h-11 rounded bg-neutral-100" })
-					]
-				})]
+				className: "motion-safe:animate-pulse",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "aspect-square bg-commerce-tint-strong" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-2 pt-3",
+						children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-2/3 rounded bg-commerce-tint-strong" }), /* @__PURE__ */ jsx("div", { className: "h-4 w-1/4 rounded bg-commerce-tint-strong" })]
+					}),
+					/* @__PURE__ */ jsx("div", { className: "mt-4 h-11 rounded-lg bg-commerce-tint" })
+				]
 			}, placeholder)) : items.map(({ key, item }) => /* @__PURE__ */ jsx(CatalogItemContext.Provider, {
 				value: item,
 				children: card
@@ -1659,25 +2138,43 @@ function CatalogProducts({ className, children }) {
 		})
 	] });
 }
-/** First-page and next-page buttons. Renders nothing for samples, which have one page. */
+/**
+* Renders only when a connected store's catalog has no products: "No products available.", or its children. While
+* one is mounted, `CatalogProducts` leaves out its own empty message. Samples are never empty.
+*/
+function CatalogEmpty({ className, children }) {
+	const catalog = useCatalogInternal("CatalogEmpty");
+	const register = useContext(CatalogEmptyContext)?.register;
+	useEffect(() => register?.("empty"), [register]);
+	if (catalog.source === "sample" || !catalog.products.isSuccess || catalog.nodes.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...partProps("catalog-empty", className),
+		children: hasChildren(children) ? children : /* @__PURE__ */ jsx("p", { children: "No products available." })
+	});
+}
+/**
+* First-page and next-page buttons. Renders nothing when there is only one page, including for samples.
+*/
 function CatalogPagination({ className }) {
 	const catalog = useCatalogInternal("CatalogPagination");
 	if (catalog.source === "sample") return null;
 	const { after, goToPage } = catalog;
 	const pageInfo = catalog.products.data?.skuGroups?.pageInfo;
+	const hasNext = !!(pageInfo?.hasNextPage && pageInfo.endCursor);
+	if (!after && !hasNext) return null;
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Product pages",
-		className: partClass(className),
+		...partProps("catalog-pagination", className),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between",
-			children: [after ? /* @__PURE__ */ jsx("button", {
+			className: "flex justify-center gap-3",
+			children: [after && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: buttonClass,
+				className: secondaryButtonClass,
 				onClick: () => goToPage(),
 				children: "First page"
-			}) : /* @__PURE__ */ jsx("span", {}), pageInfo?.hasNextPage && pageInfo.endCursor && /* @__PURE__ */ jsx("button", {
+			}), hasNext && pageInfo?.endCursor && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: buttonClass,
+				className: secondaryButtonClass,
 				onClick: () => goToPage(pageInfo.endCursor ?? void 0),
 				children: "Next page"
 			})]
@@ -1685,18 +2182,20 @@ function CatalogPagination({ className }) {
 	});
 }
 /** The packaged catalog. Compose `CatalogRoot` and the catalog parts for a custom layout. */
-function Catalog({ title, description, showHeader = true, sampleProducts: sampleProducts$1 }) {
+function Catalog({ title, description, showHeader = true, sampleProducts: sampleProducts$1, pageSize }) {
 	return /* @__PURE__ */ jsxs(CatalogRoot, {
 		sampleProducts: sampleProducts$1,
+		pageSize,
 		children: [
-			showHeader && /* @__PURE__ */ jsx(CatalogHeader, {
-				title,
-				description,
-				className: "border-b border-neutral-200 pb-10 pt-4 sm:pb-14 sm:pt-8"
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2 pb-6 pt-4 sm:pb-8 sm:pt-8",
+				children: [showHeader && /* @__PURE__ */ jsx(CatalogHeader, {
+					title,
+					description
+				}), /* @__PURE__ */ jsx(CatalogSummary, {})]
 			}),
-			/* @__PURE__ */ jsx(CatalogSummary, { className: "border-b border-neutral-200 py-6 sm:py-8" }),
-			/* @__PURE__ */ jsx(CatalogProducts, { className: "grid grid-cols-1 gap-6 py-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:py-10" }),
-			/* @__PURE__ */ jsx(CatalogPagination, { className: "border-t border-neutral-200 pt-6" })
+			/* @__PURE__ */ jsx(CatalogProducts, { className: catalogGridClass }),
+			/* @__PURE__ */ jsx(CatalogPagination, { className: "mt-12 border-t border-commerce-line pt-6" })
 		]
 	});
 }
@@ -1737,7 +2236,7 @@ function useProductDetails() {
 * A selection is never purchasable until the server verifies it.
 */
 function useProductDetailsOption(attribute) {
-	const { attributes, selections, selectOption, register } = useProductDetailsInternal("useProductDetailsOption");
+	const { attributes, selections, selectOption, register, soldOutValues, showMissing, getSwatch } = useProductDetailsInternal("useProductDetailsOption");
 	useEffect(() => register(`attribute:${attribute}`), [attribute, register]);
 	const index = attributes.findIndex((candidate) => candidate.name === attribute);
 	const match = attributes[index];
@@ -1747,10 +2246,17 @@ function useProductDetailsOption(attribute) {
 		name: match.name,
 		label: match.label,
 		selected,
+		missing: showMissing && !selected,
 		values: match.values.map((value) => ({
 			name: value.name,
 			label: value.label,
-			selected: value.name === selected
+			selected: value.name === selected,
+			soldOut: soldOutValues[index]?.has(value.name) ?? false,
+			swatch: getSwatch?.({
+				attribute: match.name,
+				name: value.name,
+				label: value.label
+			}) || null
 		})),
 		select: (value) => {
 			if (value === null) selectOption(attribute, "");
@@ -1763,26 +2269,38 @@ function useSkuOptionRegistration() {
 	const { register } = useProductDetailsInternal("ProductDetailsOptions");
 	useEffect(() => register("sku"), [register]);
 }
-/** Loads the product for the route's `:productId` and provides state to product parts. */
-function ProductDetailsRoot({ children, className }) {
-	const { productId = "" } = useParams();
+/** Loads one product, by default the route's `:productId`, and provides state to product parts. */
+function ProductDetailsRoot({ productId: productIdProp, className,...props }) {
+	const { productId: routeProductId = "" } = useParams();
+	const productId = productIdProp ?? routeProductId;
 	const { connection } = useCommerce();
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || productId || connection !== "ready") return;
+		console.warn("[gd-commerce-storefront] ProductDetailsRoot has no product to show. Pass `productId`, or render it on a route with a `:productId` parameter.");
+	}, [productId, connection]);
 	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" ? /* @__PURE__ */ jsx(ProductDetailsLoader, {
 		productId,
 		className,
-		children
+		...props
 	}, productId) : /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-details-root", className),
 		children: /* @__PURE__ */ jsx(CommerceStatus, {})
 	}) });
 }
-function ProductDetailsLoader({ productId, className, children }) {
-	const { config } = useCommerce();
-	const [params, setParams] = useSearchParams();
+function ProductDetailsLoader({ productId, className, children, urlState = true, loading, notFound, error }) {
+	const { config, getSwatch } = useCommerce();
+	const [params, setParams] = useRootParams(urlState);
 	const [quantity, setQuantity] = useState(1);
 	const [imageIndex, setImageIndex] = useState(0);
+	const [showMissing, setShowMissing] = useState(false);
+	const [focusMissing, setFocusMissing] = useState(0);
+	const root = useRef(null);
+	useEffect(() => {
+		if (focusMissing) focusFirstMissing(root);
+	}, [focusMissing]);
 	const product = useQuery({
 		retry: false,
+		enabled: !!productId,
 		queryKey: [
 			"commerce",
 			config.cartScope,
@@ -1830,7 +2348,6 @@ function ProductDetailsLoader({ productId, className, children }) {
 		if (value$1) next.set(key, value$1);
 		else next.delete(key);
 		setParams(next);
-		setQuantity(1);
 		setImageIndex(0);
 	};
 	const { register, has } = usePartRegistry();
@@ -1841,43 +2358,50 @@ function ProductDetailsLoader({ productId, className, children }) {
 		if (missing.length === 0) return;
 		console.warn(`[gd-commerce-storefront] No control for ${missing.map((control) => control === "sku" ? "the SKU option" : `"${control.slice(10)}"`).join(", ")} is rendered right now, so this product cannot be added to the cart until one is. Render <ProductDetailsOptions />, <ProductDetailsOption attribute='…' /> for each attribute, or <ProductDetailsPurchase />, or ignore this if the control mounts later.`);
 	}, [requiredControls, has]);
-	if (product.isPending) return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: /* @__PURE__ */ jsx("p", {
+	if (product.isPending && productId) return /* @__PURE__ */ jsx("div", {
+		...partProps("product-details-root", className),
+		children: hasChildren(loading) ? loading : /* @__PURE__ */ jsx("p", {
 			role: "status",
+			className: "text-sm text-commerce-muted",
 			children: "Loading product…"
 		})
 	});
-	if (product.isError && !productNotFound) return /* @__PURE__ */ jsxs("div", {
-		role: "alert",
-		className: partClass(className),
-		children: [
-			/* @__PURE__ */ jsx("h1", {
-				className: "text-2xl font-semibold",
-				children: "Product unavailable"
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "my-4 text-red-700",
-				children: message(product.error)
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: buttonClass,
-				onClick: () => void product.refetch(),
-				children: "Retry product"
-			})
-		]
-	});
-	if (productNotFound || !group) return /* @__PURE__ */ jsxs("div", {
-		className: partClass(className),
-		children: [/* @__PURE__ */ jsx("h1", {
-			className: "text-2xl font-semibold",
+	if (product.isError && !productNotFound) {
+		const retry = () => void product.refetch();
+		return /* @__PURE__ */ jsx("div", {
+			role: "alert",
+			...partProps("product-details-root", className),
+			children: renderLabel(error, {
+				message: message(product.error),
+				retry
+			}, /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("h1", {
+					className: "text-2xl font-semibold tracking-tight",
+					children: "Product unavailable"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: `my-4 ${errorNoticeClass}`,
+					children: message(product.error)
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: buttonClass,
+					onClick: retry,
+					children: "Retry product"
+				})
+			] }))
+		});
+	}
+	if (productNotFound || !group) return /* @__PURE__ */ jsx("div", {
+		...partProps("product-details-root", className),
+		children: hasChildren(notFound) ? notFound : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-2xl font-semibold tracking-tight",
 			children: "Product not found"
 		}), /* @__PURE__ */ jsx(Link, {
-			className: `${buttonClass} mt-4`,
+			className: `${buttonClass} mt-6`,
 			to: config.catalogPath,
 			children: "Back to shop"
-		})]
+		})] })
 	});
 	const value = {
 		product: group,
@@ -1903,16 +2427,50 @@ function ProductDetailsLoader({ productId, className, children }) {
 		retryVariant: () => {
 			if (matched.isError) matched.refetch();
 		},
-		register
+		register,
+		soldOutValues: getSoldOutValues(group, attributes, selections),
+		showMissing,
+		requestMissing: () => {
+			setShowMissing(true);
+			setFocusMissing((count) => count + 1);
+		},
+		getSwatch
 	};
 	return /* @__PURE__ */ jsx(ProductDetailsContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx("article", {
-			className: partClass(className),
+			ref: root,
+			...partProps("product-details-root", className),
 			children
 		})
 	});
 }
+function focusFirstMissing(root) {
+	root.current?.querySelector("[data-commerce-missing] input:not(:disabled), [data-commerce-missing] select")?.focus();
+}
+/**
+* For each attribute, the values whose every SKU, among those with the other selected values, has tracked stock
+* used up. Needs every SKU with its attribute values, so it is empty for a truncated list or an older server.
+*/
+function getSoldOutValues(group, attributes, selections) {
+	const connection = group?.skus;
+	const skus = connection?.edges?.flatMap((edge) => edge?.node ? [edge.node] : []) ?? [];
+	const values = skus.map(getSkuAttributeValueNames);
+	const complete = !connection?.pageInfo?.hasNextPage && (connection?.totalCount ?? skus.length) === skus.length && values.every((names) => names !== null);
+	return attributes.map((attribute, index) => {
+		const soldOut = /* @__PURE__ */ new Set();
+		if (!complete) return soldOut;
+		const others = selections.filter((selection, other) => other !== index && selection);
+		for (const value of attribute.values) {
+			const matching = skus.filter((_, sku) => {
+				const names = values[sku] ?? [];
+				return names.includes(value.name) && others.every((selection) => names.includes(selection));
+			});
+			if (matching.length && matching.every((sku) => isSoldOut(getAvailableInventoryQuantity(sku)))) soldOut.add(value.name);
+		}
+		return soldOut;
+	});
+}
 
 //#endregion
 //#region src/product-purchase.tsx
@@ -1923,33 +2481,37 @@ const disabledReasons = {
 	unavailable: "This combination is unavailable. Choose different options.",
 	"not-purchasable": "This product is not currently available to purchase."
 };
-/** The packaged purchase area: options, status, availability, quantity, and add to cart. */
+/** Above this many values, buttons wrap into a wall, so the option is a select. */
+const maxChoiceButtons = 8;
+/** The packaged purchase area: options, status, quantity, add to cart, and availability. */
 function ProductDetailsPurchase({ className }) {
 	const { attributes, skuOptions } = useProductDetailsInternal("ProductDetailsPurchase");
 	const belowOptions = attributes.length || skuOptions.length ? "-mt-4" : void 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: partClass("space-y-6", className),
+		...partProps("product-details-purchase", "space-y-6", className),
 		children: [
 			/* @__PURE__ */ jsx(OptionControls, {}),
 			/* @__PURE__ */ jsx(ProductDetailsPurchaseStatus, { className: belowOptions }),
-			/* @__PURE__ */ jsx(ProductDetailsAvailability, { className: belowOptions }),
-			/* @__PURE__ */ jsx(ProductDetailsQuantity, {}),
-			/* @__PURE__ */ jsx(ProductDetailsAddToCart, {})
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ jsx(ProductDetailsQuantity, {}), /* @__PURE__ */ jsx(ProductDetailsAddToCart, { className: "min-w-0 flex-1" })]
+			}),
+			/* @__PURE__ */ jsx(ProductDetailsAvailability, { className: "-mt-3" })
 		]
 	});
 }
-/** A select for every product attribute, or the SKU list for products without attributes. */
+/** A control for every product attribute, or the SKU list for products without attributes. */
 function ProductDetailsOptions({ className }) {
 	const { attributes, skuOptions } = useProductDetailsInternal("ProductDetailsOptions");
 	if (attributes.length === 0 && skuOptions.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass("space-y-6", className),
+		...partProps("product-details-options", "space-y-6", className),
 		children: /* @__PURE__ */ jsx(OptionControls, {})
 	});
 }
 function OptionControls() {
 	const { attributes, skuOptions } = useProductDetailsInternal("ProductDetailsOptions");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [attributes.map((attribute) => /* @__PURE__ */ jsx(ProductDetailsOption, { attribute: attribute.name }, attribute.id || attribute.name)), skuOptions.length > 0 && /* @__PURE__ */ jsx(SkuOption, {})] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [attributes.map((attribute) => /* @__PURE__ */ jsx(ProductDetailsOption, { attribute: attribute.name }, attribute.id || attribute.name)), skuOptions.length > 0 && /* @__PURE__ */ jsx(SkuOption, {})] });
 }
 function Select({ children,...props }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -1973,66 +2535,155 @@ function Select({ children,...props }) {
 		})]
 	});
 }
+const choiceButtonClass = "inline-flex min-h-11 min-w-12 items-center justify-center rounded-lg border border-commerce-edge px-4 text-sm font-medium transition-colors group-hover:border-current peer-checked:border-commerce-accent peer-checked:bg-commerce-accent peer-checked:text-commerce-on-accent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-commerce-accent";
+const swatchClass = "relative block h-9 w-9 overflow-hidden rounded-full border border-commerce-edge peer-checked:outline peer-checked:outline-2 peer-checked:outline-offset-2 peer-checked:outline-commerce-accent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-current";
+/**
+* One option as buttons (radios), swatches when every value has one, or a select for long lists. Sold-out values are
+* crossed out but stay selectable, so the shopper can change any option in any order.
+*/
+function ChoiceGroup({ label, selected, choices, missing, onSelect }) {
+	const name = useId();
+	const errorId = useId();
+	const error = missing && /* @__PURE__ */ jsxs("p", {
+		id: errorId,
+		className: "mt-2 inline-block rounded bg-red-50 px-2 py-1 text-sm text-red-800",
+		children: [
+			"Select ",
+			inSentence(label),
+			"."
+		]
+	});
+	if (choices.length > maxChoiceButtons) return /* @__PURE__ */ jsxs("fieldset", { children: [
+		/* @__PURE__ */ jsx("legend", {
+			className: "mb-2 text-sm font-medium",
+			children: label
+		}),
+		/* @__PURE__ */ jsxs(Select, {
+			"aria-label": label,
+			"aria-invalid": missing || void 0,
+			"aria-describedby": missing ? errorId : void 0,
+			value: selected,
+			onChange: (event) => onSelect(event.target.value),
+			children: [/* @__PURE__ */ jsxs("option", {
+				value: "",
+				children: ["Select ", inSentence(label)]
+			}), choices.map((choice) => /* @__PURE__ */ jsx("option", {
+				value: choice.value,
+				children: choice.soldOut ? `${choice.label} (sold out)` : choice.label
+			}, choice.value))]
+		}),
+		error
+	] });
+	const swatches = choices.every((choice) => choice.swatch);
+	const selectedLabel = choices.find((choice) => choice.value === selected)?.label;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"aria-describedby": missing ? errorId : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("legend", {
+				className: "mb-2 flex gap-2 text-sm font-medium",
+				children: [label, selectedLabel && /* @__PURE__ */ jsx("span", {
+					className: "font-normal text-commerce-muted",
+					children: selectedLabel
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `flex flex-wrap ${swatches ? "gap-3" : "gap-2"}`,
+				children: choices.map((choice) => /* @__PURE__ */ jsxs("label", {
+					className: "group relative cursor-pointer",
+					title: swatches ? `${choice.label}${choice.soldOut ? ", sold out" : ""}` : void 0,
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						className: "peer absolute inset-0 z-10 m-0 cursor-pointer opacity-0",
+						name,
+						value: choice.value,
+						checked: choice.value === selected,
+						"aria-invalid": missing || void 0,
+						"aria-label": choice.soldOut ? `${choice.label}, sold out` : void 0,
+						"data-commerce-control": "choice",
+						onChange: () => onSelect(choice.value)
+					}), swatches ? /* @__PURE__ */ jsxs("span", {
+						className: `${swatchClass} ${choice.soldOut ? "opacity-50" : ""}`,
+						style: { background: choice.swatch ?? void 0 },
+						children: [choice.soldOut && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2 rotate-45 bg-current"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: choice.label
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: `${choiceButtonClass} ${choice.soldOut ? "text-commerce-muted line-through decoration-1" : ""}`,
+						children: choice.label
+					})]
+				}, choice.value))
+			}),
+			error
+		]
+	});
+}
 function SkuOption() {
-	const { skuOptions, explicitSkuId, selectSku } = useProductDetailsInternal("ProductDetailsOptions");
-	const id = useId();
+	const { skuOptions, explicitSkuId, selectSku, showMissing } = useProductDetailsInternal("ProductDetailsOptions");
 	useSkuOptionRegistration();
-	return /* @__PURE__ */ jsxs("div", {
-		className: partClass(),
-		children: [/* @__PURE__ */ jsx("label", {
-			htmlFor: id,
-			className: "mb-2 block font-medium",
-			children: "Option"
-		}), /* @__PURE__ */ jsxs(Select, {
-			id,
-			value: explicitSkuId,
-			onChange: (event) => selectSku(event.target.value),
-			children: [/* @__PURE__ */ jsx("option", {
-				value: "",
-				children: "Select an option"
-			}), skuOptions.map((sku) => /* @__PURE__ */ jsx("option", {
+	const missing = showMissing && !explicitSkuId;
+	return /* @__PURE__ */ jsx("div", {
+		...partProps("product-details-sku-option"),
+		"data-commerce-missing": missing || void 0,
+		children: /* @__PURE__ */ jsx(ChoiceGroup, {
+			label: "Option",
+			selected: explicitSkuId,
+			missing,
+			onSelect: selectSku,
+			choices: skuOptions.map((sku) => ({
 				value: sku.id ?? "",
-				children: sku.label?.trim() || sku.name?.trim()
-			}, sku.id))]
-		})]
+				label: sku.label?.trim() || sku.name?.trim() || "",
+				soldOut: isSoldOut(getAvailableInventoryQuantity(sku)),
+				swatch: null
+			}))
+		})
 	});
 }
-/** A select for one product attribute. Use `useProductDetailsOption` for swatches or other custom controls. */
+/**
+* One product attribute: buttons, swatches when the provider's `getSwatch` gives every value one, or a select for
+* more than eight values. Use `useProductDetailsOption` for other custom controls.
+*/
 function ProductDetailsOption({ attribute, className }) {
 	const option = useProductDetailsOption(attribute);
 	if (!option) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: /* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", {
-			className: "mb-2 font-medium",
-			children: option.label
-		}), /* @__PURE__ */ jsxs(Select, {
-			"aria-label": option.label,
-			value: option.selected ?? "",
-			onChange: (event) => option.select(event.target.value || null),
-			children: [/* @__PURE__ */ jsxs("option", {
-				value: "",
-				children: ["Select ", option.label.toLowerCase()]
-			}), option.values.map((value) => /* @__PURE__ */ jsx("option", {
+		...partProps("product-details-option", className),
+		"data-commerce-attribute": option.name,
+		"data-commerce-missing": option.missing || void 0,
+		children: /* @__PURE__ */ jsx(ChoiceGroup, {
+			label: option.label,
+			selected: option.selected ?? "",
+			missing: option.missing,
+			onSelect: (value) => option.select(value || null),
+			choices: option.values.map((value) => ({
 				value: value.name,
-				children: value.label
-			}, value.name))]
-		})] })
+				label: value.label,
+				soldOut: value.soldOut,
+				swatch: value.swatch
+			}))
+		})
 	});
 }
-/** The single message explaining why the selection is not yet purchasable. Renders nothing when ready. */
+/**
+* The single message explaining why the selection is not purchasable. Renders nothing when ready, or before every
+* option is chosen, when the add button names the next one.
+*/
 function ProductDetailsPurchaseStatus({ className }) {
 	const { status, variantError, retryVariant } = useProductDetailsInternal("ProductDetailsPurchaseStatus");
 	let content;
 	switch (status) {
-		case "ready": return null;
+		case "ready":
+		case "incomplete": return null;
 		case "variant-error":
 			content = /* @__PURE__ */ jsxs("div", {
 				role: "alert",
-				className: "text-red-700",
+				className: errorNoticeClass,
 				children: [/* @__PURE__ */ jsx("p", { children: message(variantError) }), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "min-h-11 bg-white text-red-700 underline",
+					className: errorActionClass,
 					onClick: retryVariant,
 					children: "Retry availability"
 				})]
@@ -2041,27 +2692,26 @@ function ProductDetailsPurchaseStatus({ className }) {
 		case "unavailable":
 			content = /* @__PURE__ */ jsx("p", {
 				role: "status",
-				className: "text-sm text-red-700",
+				className: errorNoticeClass,
 				children: disabledReasons[status]
 			});
 			break;
 		case "not-purchasable":
 			content = /* @__PURE__ */ jsx("p", {
-				className: "text-sm",
+				className: "text-sm text-commerce-muted",
 				children: disabledReasons[status]
 			});
 			break;
-		case "incomplete":
 		case "checking":
 			content = /* @__PURE__ */ jsx("p", {
 				role: "status",
-				className: "text-sm",
+				className: "text-sm text-commerce-muted",
 				children: disabledReasons[status]
 			});
 			break;
 	}
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-details-purchase-status", className),
 		children: content
 	});
 }
@@ -2070,70 +2720,153 @@ function ProductDetailsAvailability({ className }) {
 	const { selectedSku, availableQuantity } = useProductDetailsInternal("ProductDetailsAvailability");
 	if (!selectedSku) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-details-availability", className),
 		children: /* @__PURE__ */ jsx("p", {
-			className: "text-sm",
+			className: "text-sm text-commerce-muted",
 			"aria-live": "polite",
 			children: availableQuantity === null ? "Available to order" : isSoldOut(availableQuantity) ? "This variant is out of stock" : `${availableQuantity} available`
 		})
 	});
 }
-/** Quantity for the verified SKU, with a message when it cannot be added. Renders nothing until a SKU is verified. */
+const stepperButtonClass = "inline-flex min-h-11 min-w-10 items-center justify-center rounded-lg transition-colors hover:bg-commerce-tint focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-current disabled:cursor-not-allowed disabled:text-commerce-muted disabled:hover:bg-transparent";
+function StepperIcon({ plus }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		className: "h-4 w-4",
+		children: /* @__PURE__ */ jsx("path", {
+			d: plus ? "M3.5 8h9M8 3.5v9" : "M3.5 8h9",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})
+	});
+}
+/**
+* A quantity stepper, capped at the verified SKU's stock, with a message when a typed quantity cannot be added.
+* Disabled while the verified SKU is sold out.
+*/
 function ProductDetailsQuantity({ className }) {
-	const { selectedSku, availableQuantity, quantity, setQuantity } = useProductDetailsInternal("ProductDetailsQuantity");
+	const { selectedSku, availableQuantity, quantity, setQuantity, name } = useProductDetailsInternal("ProductDetailsQuantity");
 	const id = useId();
 	const problemId = useId();
-	if (!selectedSku) return null;
-	const problem = isSoldOut(availableQuantity) ? null : quantityProblem(quantity, availableQuantity);
+	const soldOut = !!selectedSku && isSoldOut(availableQuantity);
+	const max = selectedSku && availableQuantity !== null && availableQuantity > 0 ? availableQuantity : null;
+	const problem = soldOut ? null : quantityProblem(quantity, max);
+	const current = Number.isInteger(quantity) ? quantity : 1;
 	return /* @__PURE__ */ jsxs("div", {
-		className: partClass(className),
+		...partProps("product-details-quantity", className),
 		children: [
 			/* @__PURE__ */ jsx("label", {
 				htmlFor: id,
-				className: "mb-2 block font-medium",
+				className: "sr-only",
 				children: "Quantity"
 			}),
-			/* @__PURE__ */ jsx("input", {
-				id,
-				type: "number",
-				min: 1,
-				max: availableQuantity ?? void 0,
-				step: 1,
-				className: `${inputClass} w-28`,
-				value: Number.isNaN(quantity) ? "" : quantity,
-				"aria-invalid": problem ? true : void 0,
-				"aria-describedby": problem ? problemId : void 0,
-				onChange: (event) => setQuantity(event.target.valueAsNumber)
+			/* @__PURE__ */ jsxs("div", {
+				className: "inline-flex items-center rounded-lg border border-commerce-edge",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: stepperButtonClass,
+						"aria-label": `Decrease quantity of ${name}`,
+						"data-commerce-control": "decrease",
+						disabled: soldOut || current <= 1,
+						onClick: () => setQuantity(current - 1),
+						children: /* @__PURE__ */ jsx(StepperIcon, {})
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id,
+						type: "number",
+						min: 1,
+						max: max ?? void 0,
+						step: 1,
+						disabled: soldOut,
+						className: "min-h-11 w-10 appearance-none bg-transparent text-center text-sm tabular-nums [-moz-appearance:textfield] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-current disabled:text-commerce-muted [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+						value: Number.isNaN(quantity) ? "" : quantity,
+						"aria-invalid": problem ? true : void 0,
+						"aria-describedby": problem ? problemId : void 0,
+						onChange: (event) => setQuantity(event.target.valueAsNumber)
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: stepperButtonClass,
+						"aria-label": `Increase quantity of ${name}`,
+						"data-commerce-control": "increase",
+						disabled: soldOut || max !== null && current >= max,
+						onClick: () => setQuantity(current + 1),
+						children: /* @__PURE__ */ jsx(StepperIcon, { plus: true })
+					})
+				]
 			}),
 			problem && /* @__PURE__ */ jsx("p", {
 				id: problemId,
-				className: "mt-2 text-sm text-red-700",
+				className: `mt-2 ${errorNoticeClass}`,
 				children: problem
 			})
 		]
 	});
 }
-/** Adds the verified SKU and quantity. While disabled, its accessible description says why. */
-function ProductDetailsAddToCart({ className }) {
-	const { selectedSku, name, quantity, status } = useProductDetailsInternal("ProductDetailsAddToCart");
+/**
+* Adds the verified SKU and quantity, labeled with the total, such as "Add to cart · $64.00". Until every option is
+* chosen it names the next one, such as "Select size", and pressing it marks the missing options and focuses the
+* first. While the selection is checked or unavailable it is disabled, and its accessible description says why.
+*/
+function ProductDetailsAddToCart({ className, children }) {
+	const { selectedSku, name, quantity, status, price, attributes, selections, requestMissing } = useProductDetailsInternal("ProductDetailsAddToCart");
+	const { config } = useCommerce();
+	const money$1 = useMoney();
 	const reasonId = useId();
-	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
-		children: selectedSku ? /* @__PURE__ */ jsx(AddToCartButton, {
-			sku: selectedSku,
-			name,
-			quantity
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+	if (selectedSku) {
+		const unit = price?.value?.value;
+		const total = unit != null ? money$1(unit * (Number.isInteger(quantity) && quantity > 0 ? quantity : 1), price?.value?.currencyCode ?? config.currencyCode) : null;
+		return /* @__PURE__ */ jsx("div", {
+			...partProps("product-details-add-to-cart", className),
+			children: /* @__PURE__ */ jsx(AddToCart, {
+				sku: selectedSku,
+				name,
+				quantity,
+				className: buttonClass,
+				block: true,
+				label: total && `Add to cart · ${total}`,
+				labelName: total ? `Add to cart, ${total}` : void 0,
+				children
+			})
+		});
+	}
+	if (status === "incomplete") {
+		const next = attributes.find((_, index) => !selections[index])?.label;
+		return /* @__PURE__ */ jsx("div", {
+			...partProps("product-details-add-to-cart", className),
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `${buttonClass} w-full`,
+				"data-commerce-part": "add-to-cart-button",
+				onClick: requestMissing,
+				children: renderLabel(children, {
+					busy: false,
+					soldOut: false
+				}, next ? `Select ${inSentence(next)}` : "Select an option")
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...partProps("product-details-add-to-cart", className),
+		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: `${buttonClass} w-full`,
 			disabled: true,
 			"aria-describedby": reasonId,
-			children: "Add to cart"
+			"data-commerce-part": "add-to-cart-button",
+			children: renderLabel(children, {
+				busy: false,
+				soldOut: false
+			}, "Add to cart")
 		}), /* @__PURE__ */ jsx("span", {
 			id: reasonId,
 			hidden: true,
 			children: status === "ready" ? "" : disabledReasons[status]
-		})] })
+		})]
 	});
 }
 
@@ -2141,28 +2874,44 @@ function ProductDetailsAddToCart({ className }) {
 //#region src/product-details.tsx
 /** The packaged product page for `${productPath}/:productId`. Compose the parts for a custom layout. */
 function ProductDetails() {
-	return /* @__PURE__ */ jsxs(ProductDetailsRoot, { children: [/* @__PURE__ */ jsx(ProductDetailsBackLink, { className: "mb-8 sm:mb-10" }), /* @__PURE__ */ jsxs("div", {
-		className: "grid items-start gap-8 lg:grid-cols-12 lg:gap-12",
-		children: [/* @__PURE__ */ jsx(ProductDetailsGallery, { className: "min-w-0 lg:col-span-7" }), /* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 lg:col-span-5 lg:py-4",
+	return /* @__PURE__ */ jsxs(ProductDetailsRoot, { children: [/* @__PURE__ */ jsx(ProductDetailsBackLink, { className: "mb-4 sm:mb-6" }), /* @__PURE__ */ jsxs("div", {
+		className: "grid items-start gap-8 md:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] lg:gap-12",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative min-w-0",
+			children: [/* @__PURE__ */ jsx(ProductDetailsGallery, {}), /* @__PURE__ */ jsx(ProductDetailsBadge, { className: "pointer-events-none absolute left-4 top-4" })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 md:pt-2",
 			children: [
 				/* @__PURE__ */ jsx(ProductDetailsTitle, {}),
-				/* @__PURE__ */ jsx(ProductDetailsPrice, { className: "mt-6" }),
-				/* @__PURE__ */ jsx(ProductDetailsDescription, { className: "my-8" }),
-				/* @__PURE__ */ jsx(ProductDetailsPurchase, { className: "border-t border-neutral-200 pt-8" })
+				/* @__PURE__ */ jsx(ProductDetailsPrice, { className: "mt-2" }),
+				/* @__PURE__ */ jsx(ProductDetailsDescription, { className: "mt-6" }),
+				/* @__PURE__ */ jsx(ProductDetailsPurchase, { className: "mt-6 border-t border-commerce-line pt-6" })
 			]
 		})]
 	})] });
 }
-function ProductDetailsBackLink({ className }) {
+/** A link to the catalog. */
+function ProductDetailsBackLink({ className, children }) {
 	useProductDetailsInternal("ProductDetailsBackLink");
 	const { config } = useCommerce();
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-details-back-link", className),
 		children: /* @__PURE__ */ jsx(Link, {
-			className: "inline-flex min-h-11 items-center text-sm text-inherit underline underline-offset-4 focus-visible:outline focus-visible:outline-2",
+			className: "inline-flex min-h-11 items-center gap-1 text-sm text-commerce-muted underline-offset-4 transition-colors hover:text-inherit hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-current",
 			to: config.catalogPath,
-			children: "← Back to shop"
+			children: renderLabel(children, void 0, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 16 16",
+				className: "h-3.5 w-3.5",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M10 4L6 8l4 4",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}), "Back to shop"] }))
 		})
 	});
 }
@@ -2170,20 +2919,21 @@ function ProductDetailsBackLink({ className }) {
 function ProductDetailsGallery({ className }) {
 	const { images, imageIndex, setImageIndex, name } = useProductDetailsInternal("ProductDetailsGallery");
 	return /* @__PURE__ */ jsxs("div", {
-		className: partClass(className),
+		...partProps("product-details-gallery", className),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "aspect-square overflow-hidden rounded-lg",
+			className: "aspect-square overflow-hidden bg-commerce-tint",
 			children: /* @__PURE__ */ jsx(ProductImage, {
 				url: images[imageIndex],
 				name
 			}, images[imageIndex])
 		}), images.length > 1 && /* @__PURE__ */ jsx("div", {
-			className: "mt-4 flex gap-3 overflow-x-auto",
+			className: "mt-3 flex gap-3 overflow-x-auto p-1",
 			children: images.map((url, index) => /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: `h-20 w-20 shrink-0 overflow-hidden rounded-lg border-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${imageIndex === index ? "border-neutral-900" : "border-transparent"}`,
+				className: `h-20 w-20 shrink-0 overflow-hidden bg-commerce-tint outline-offset-2 transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-current ${imageIndex === index ? "outline outline-2 outline-current" : "opacity-60 hover:opacity-100"}`,
 				"aria-label": `View image ${index + 1}`,
 				"aria-pressed": imageIndex === index,
+				"data-commerce-control": "thumbnail",
 				onClick: () => setImageIndex(index),
 				children: /* @__PURE__ */ jsx(ProductImage, {
 					url,
@@ -2193,31 +2943,59 @@ function ProductDetailsGallery({ className }) {
 		})]
 	});
 }
+/**
+* "Sale" when the verified SKU's compare-at price is above its price, or, before then, when some SKU's is. Renders
+* nothing otherwise.
+*/
+function ProductDetailsBadge({ className }) {
+	const { price, product } = useProductDetailsInternal("ProductDetailsBadge");
+	if (!(price ? isOnSale(price.value?.value, price.compareAtValue?.value) : isProductOnSale(product))) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...partProps("product-details-badge", className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: saleBadgeClass,
+			children: "Sale"
+		})
+	});
+}
 /** The product name as the page's H1. */
 function ProductDetailsTitle({ className }) {
 	const { name } = useProductDetailsInternal("ProductDetailsTitle");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-details-title", className),
 		children: /* @__PURE__ */ jsx("h1", {
-			className: "break-words text-4xl font-semibold leading-tight sm:text-5xl",
+			className: "text-balance break-words text-3xl font-semibold leading-tight tracking-tight sm:text-4xl",
 			children: name
 		})
 	});
 }
-/** The verified SKU's price and compare-at price, or the product's starting price. */
+/**
+* The verified SKU's price and compare-at price, or the product's starting price. Before a SKU is verified, the
+* compare-at price shows only when it belongs to the cheapest SKUs, so it never pairs prices from different SKUs.
+*/
 function ProductDetailsPrice({ className }) {
 	const { price, product } = useProductDetailsInternal("ProductDetailsPrice");
 	const { config } = useCommerce();
+	const money$1 = useMoney();
+	let compareAt = null;
+	if (price?.compareAtValue?.value != null && isOnSale(price.value?.value, price.compareAtValue.value)) compareAt = money$1(price.compareAtValue.value, price.compareAtValue.currencyCode ?? config.currencyCode);
+	else if (!price) {
+		const starting = getStartingCompareAt(product);
+		if (starting !== null) compareAt = money$1(starting);
+	}
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-details-price", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			"aria-live": "polite",
-			className: "flex flex-wrap items-baseline gap-x-3 gap-y-1 text-2xl font-medium",
+			className: "flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xl font-medium tabular-nums",
 			"data-testid": "product-price",
-			children: [price?.value?.value != null ? money(price.value.value, price.value.currencyCode ?? config.currencyCode) : product.priceRange?.min != null ? `From ${money(product.priceRange.min, config.currencyCode)}` : "Price unavailable", price?.compareAtValue?.value != null && price.value?.value != null && price.compareAtValue.value > price.value.value && /* @__PURE__ */ jsx("del", {
-				className: "text-lg font-normal",
-				children: money(price.compareAtValue.value, price.compareAtValue.currencyCode ?? config.currencyCode)
-			})]
+			children: [price?.value?.value != null ? money$1(price.value.value, price.value.currencyCode ?? config.currencyCode) : product.priceRange?.min != null ? `From ${money$1(product.priceRange.min)}` : "Price unavailable", compareAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Was"
+			}), /* @__PURE__ */ jsx("del", {
+				className: "text-base font-normal text-commerce-muted",
+				children: compareAt
+			})] })]
 		})
 	});
 }
@@ -2225,13 +3003,74 @@ function ProductDetailsPrice({ className }) {
 function ProductDetailsDescription({ className }) {
 	const { selectedSku, product } = useProductDetailsInternal("ProductDetailsDescription");
 	return /* @__PURE__ */ jsx("div", {
-		className: partClass(className),
+		...partProps("product-details-description", className),
 		children: /* @__PURE__ */ jsx("p", {
-			className: "whitespace-pre-line text-base leading-7",
+			className: "whitespace-pre-line text-base leading-7 text-commerce-muted",
 			children: selectedSku?.description ?? product.description
 		})
 	});
 }
 
 //#endregion
-export { AddToCartButton, ApiError, CartButton, CartCheckout, CartCheckoutNote, CartClose, CartDescription, CartDrawer, CartDrawerRoot, CartEmpty, CartItemImage, CartItemName, CartItemOptions, CartItemPrice, CartItemQuantity, CartItemRemove, CartItemRoot, CartItems, CartNotices, CartRoot, CartSubtotal, CartSummary, CartTitle, Catalog, CatalogHeader, CatalogPagination, CatalogProducts, CatalogRoot, CatalogSummary, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductCardAction, ProductCardDescription, ProductCardImage, ProductCardPrice, ProductCardRoot, ProductCardTitle, ProductDetails, ProductDetailsAddToCart, ProductDetailsAvailability, ProductDetailsBackLink, ProductDetailsDescription, ProductDetailsGallery, ProductDetailsOption, ProductDetailsOptions, ProductDetailsPrice, ProductDetailsPurchase, ProductDetailsPurchaseStatus, ProductDetailsQuantity, ProductDetailsRoot, ProductDetailsTitle, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCart, useCartItem, useCommerce, useProductCard, useProductDetails, useProductDetailsOption };
+//#region src/related-products.tsx
+const packagedCard = /* @__PURE__ */ jsx(ProductCardRoot, {
+	className: packagedCardClass,
+	children: /* @__PURE__ */ jsx(PackagedCardParts, {})
+});
+/**
+* Other products from the catalog's first page, leaving out the current one. Optional and separate from
+* `ProductDetails`: place it wherever it fits, such as after the product page. There is no related-products API, so
+* the products are the catalog's first ones. Renders nothing until they load, when none are left, if the request
+* fails, or while no store is connected.
+*/
+function RelatedProducts({ productId: productIdProp, title = "You may also like", limit = 4, className, children }) {
+	const { productId: routeProductId = "" } = useParams();
+	const productId = productIdProp ?? routeProductId;
+	const { config, connection } = useCommerce();
+	const headingId = useId();
+	const first = limit + 1;
+	const products = useQuery({
+		retry: false,
+		enabled: connection === "ready",
+		queryKey: [
+			"commerce",
+			config.cartScope,
+			"products",
+			first,
+			""
+		],
+		queryFn: ({ signal }) => request(`/products?first=${first}`, {
+			signal,
+			headers: { "X-Commerce-Scope": config.cartScope }
+		})
+	});
+	const related = useMemo(() => (products.data?.skuGroups?.edges ?? []).flatMap((edge) => edge?.node?.id && edge.node.id !== productId ? [edge.node] : []).slice(0, limit), [
+		products.data,
+		productId,
+		limit
+	]);
+	if (!Number.isSafeInteger(limit) || limit < 1 || limit > 24) throw new Error(`RelatedProducts limit must be a whole number from 1 to 24, not ${limit}.`);
+	if (connection !== "ready" || !related.length) return null;
+	const card = hasChildren(children) ? children : packagedCard;
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		...partProps("related-products", className),
+		children: [/* @__PURE__ */ jsx("h2", {
+			id: headingId,
+			className: "mb-6 text-xl font-semibold tracking-tight",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: catalogGridClass,
+			children: related.map((product) => /* @__PURE__ */ jsx(CatalogItemContext.Provider, {
+				value: {
+					source: "live",
+					product
+				},
+				children: card
+			}, product.id))
+		})]
+	}) });
+}
+
+//#endregion
+export { AddToCartButton, ApiError, CartButton, CartCheckout, CartCheckoutNote, CartClose, CartContinueShopping, CartDescription, CartDrawer, CartDrawerRoot, CartEmpty, CartItemImage, CartItemName, CartItemOptions, CartItemPrice, CartItemQuantity, CartItemRemove, CartItemRoot, CartItems, CartNotices, CartRoot, CartSubtotal, CartSummary, CartTitle, Catalog, CatalogEmpty, CatalogHeader, CatalogPagination, CatalogProducts, CatalogRoot, CatalogSummary, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductCardAction, ProductCardBadge, ProductCardDescription, ProductCardImage, ProductCardPrice, ProductCardRoot, ProductCardSwatches, ProductCardTitle, ProductDetails, ProductDetailsAddToCart, ProductDetailsAvailability, ProductDetailsBackLink, ProductDetailsBadge, ProductDetailsDescription, ProductDetailsGallery, ProductDetailsOption, ProductDetailsOptions, ProductDetailsPrice, ProductDetailsPurchase, ProductDetailsPurchaseStatus, ProductDetailsQuantity, ProductDetailsRoot, ProductDetailsTitle, ProductImage, RelatedProducts, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCart, useCartItem, useCommerce, useMoney, useProductCard, useProductDetails, useProductDetailsOption };