@godaddy/gd-commerce-storefront 0.6.0 → 0.7.0

package/dist/index.js

@@ -248,7 +248,7 @@ async function loadConfig(signal) {
 		currencyCode: config.currencyCode
 	};
 }
-function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, locale, onItemAdded, onEvent }) {
+function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {}, getSwatch, locale, onItemAdded, onEvent }) {
 	const resolvedLocale = useMemo(() => resolveLocale(locale), [locale]);
 	const config = useQuery({
 		retry: false,
@@ -278,13 +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, locale, onItemAdded, onEvent }) {
+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";
@@ -571,6 +572,7 @@ function BoundCommerceProvider({ config, children, connection, connectionError,
 			connectionError,
 			retryConnection,
 			theme,
+			getSwatch,
 			locale,
 			cart,
 			open,
@@ -732,6 +734,75 @@ 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
@@ -802,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"
 		})]
@@ -819,30 +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";
-/** Opens the cart drawer and shows the item count. */
+/**
+* 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__ */ 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: renderLabel(children, { itemCount }, /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				"Cart",
-				" ",
-				/* @__PURE__ */ jsx("span", {
-					className: "rounded-full bg-white px-2 py-0.5 text-xs text-neutral-900",
-					children: itemCount
-				})
-			] }))
+			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"
 		})
 	});
 }
@@ -854,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, children }) {
+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();
@@ -867,6 +972,10 @@ function AddToCartButton({ sku, name, quantity = 1, children }) {
 	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);
@@ -881,21 +990,22 @@ function AddToCartButton({ sku, name, quantity = 1, children }) {
 		}
 	}
 	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: renderLabel(children, {
 					busy: adding,
 					soldOut
-				}, soldOut ? "Out of stock" : adding ? "Adding…" : "Add to cart")
+				}, soldOut ? "Out of stock" : adding ? "Adding…" : label ?? "Add to cart")
 			}),
 			reason && /* @__PURE__ */ jsx("span", {
 				id: reasonId,
@@ -904,7 +1014,7 @@ function AddToCartButton({ sku, name, quantity = 1, children }) {
 			}),
 			error && !open && /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "mt-3 bg-white text-sm text-red-700",
+				className: `mt-3 ${errorNoticeClass}`,
 				children: error
 			})
 		]
@@ -986,7 +1096,7 @@ 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,
@@ -1004,15 +1114,25 @@ function CartDrawerRoot({ children, className }) {
 		})] }) })
 	});
 }
-/** "Your cart", or "Sample cart" before a store is connected, as an H2. In the drawer it names the dialog. */
+/**
+* "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 } = useCartInternal("CartTitle");
+	const { isSample, itemCount } = useCartInternal("CartTitle");
 	const Heading = useContext(CartDrawerContext) ? Dialog.Title : "h2";
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-title", className),
 		children: /* @__PURE__ */ jsx(Heading, {
-			className: "text-2xl font-semibold",
-			children: renderLabel(children, { isSample }, 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,
+					")"
+				]
+			})] }))
 		})
 	});
 }
@@ -1026,10 +1146,10 @@ function CartDescription({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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
 		})
 	});
@@ -1041,9 +1161,20 @@ function CartClose({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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"
+				})
+			})
 		})
 	});
 }
@@ -1057,14 +1188,14 @@ function CartNotices({ className }) {
 			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",
@@ -1104,6 +1235,7 @@ 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",
@@ -1143,7 +1275,7 @@ function CartItemImage({ 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"
 		})
 	});
 }
@@ -1153,25 +1285,26 @@ function CartItemName({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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", {
 		...partProps("cart-item-options", className),
-		children: options.map((option) => /* @__PURE__ */ jsxs("p", {
-			className: "text-sm text-neutral-600",
-			children: [
+		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. */
@@ -1181,12 +1314,26 @@ function CartItemPrice({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-item-price", className),
 		children: /* @__PURE__ */ jsx("p", {
-			className: "text-sm",
+			className: "text-sm leading-6 tabular-nums",
 			children: subtotal === null ? "Price unavailable" : money$1(subtotal, currency)
 		})
 	});
 }
-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";
+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"
+		})
+	});
+}
 /** Decrease and increase buttons around the line's quantity. */
 function CartItemQuantity({ className }) {
 	const { id, name, quantity } = useCartItemInternal("CartItemQuantity");
@@ -1194,21 +1341,21 @@ function CartItemQuantity({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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: "
@@ -1216,14 +1363,14 @@ 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 })
 				})
 			]
 		})
@@ -1237,7 +1384,7 @@ function CartItemRemove({ className, children }) {
 		...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",
+			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}`,
@@ -1250,20 +1397,19 @@ function CartItemRemove({ className, children }) {
 	});
 }
 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. */
@@ -1273,16 +1419,32 @@ function CartEmpty({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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"
@@ -1306,17 +1468,17 @@ function CartSubtotal({ className }) {
 	if (!items.length || subtotal === null) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-subtotal", 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$1(subtotal, currency) })]
-			})
-		})
+		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 }) {
@@ -1324,9 +1486,9 @@ function CartCheckoutNote({ className }) {
 	if (isSample || !items.length) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("cart-checkout-note", "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."
+		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" })]
 		})
 	});
 }
@@ -1339,11 +1501,11 @@ function CartCheckout({ className, children }) {
 	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", {
@@ -1353,36 +1515,66 @@ function CartCheckout({ className, children }) {
 		"aria-disabled": locked || !checkoutReady,
 		"aria-busy": action === "checkout",
 		onClick: () => run("checkout", checkout),
-		children: renderLabel(children, { busy: action === "checkout" }, action === "checkout" ? "Opening checkout…" : "Proceed to Checkout")
+		children: renderLabel(children, { busy: action === "checkout" }, action === "checkout" ? "Opening checkout…" : "Proceed to checkout")
 	});
 	return /* @__PURE__ */ jsx("div", {
 		...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" })
 				]
 			})
 		]
@@ -1404,7 +1596,7 @@ function ProductImage({ url, name, className = "" }) {
 		className: `h-full w-full object-cover ${className}`,
 		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"
@@ -1504,16 +1696,16 @@ function ProductCardImage({ className }) {
 			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" })
 		})
 	});
 }
@@ -1524,9 +1716,9 @@ function ProductCardTitle({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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
@@ -1540,31 +1732,108 @@ function ProductCardDescription({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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 money$1 = useMoney();
-	let text;
-	if (card.source === "sample") text = money$1(card.sample.price, "USD");
-	else {
-		const min = card.product.priceRange?.min;
-		const max = card.product.priceRange?.max;
-		text = typeof min === "number" ? `${money$1(min)}${typeof max === "number" && max !== min ? ` – ${money$1(max)}` : ""}` : "Price unavailable";
-	}
+	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", {
 		...partProps("product-card-price", className),
-		children: /* @__PURE__ */ jsx("p", {
-			className: "text-lg font-semibold leading-7",
-			children: text
+		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.
 */
@@ -1586,19 +1855,22 @@ function ProductCardAction({ className, children }) {
 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,
+		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: renderLabel(label, {
-			action: hasVariants ? "choose-options" : "view-product",
+			action,
 			busy: false,
 			soldOut: false
 		}, hasVariants ? "Choose options" : "View product")
@@ -1613,13 +1885,13 @@ function SampleAction({ sample, label }) {
 	}, 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: buttonClass,
+		className: `${secondaryButtonClass} w-full`,
 		onClick: () => add(sample.key),
 		children: [custom, /* @__PURE__ */ jsxs("span", {
 			className: "sr-only",
@@ -1631,21 +1903,22 @@ function SampleAction({ sample, label }) {
 		})]
 	});
 }
-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$1, { 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" })
 		]
 	})] });
 }
@@ -1770,10 +2043,10 @@ function CatalogHeader({ title = "Shop all products", description = "Explore the
 	return /* @__PURE__ */ jsxs("header", {
 		...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
 		})]
 	});
@@ -1784,7 +2057,7 @@ function CatalogSummary({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...partProps("catalog-summary", className),
 		children: /* @__PURE__ */ jsx("p", {
-			className: "text-sm",
+			className: "text-sm text-commerce-muted",
 			role: "status",
 			children: summary(catalog)
 		})
@@ -1796,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: {
@@ -1803,7 +2078,7 @@ const sampleItems = sampleProducts.map((sample) => ({
 		sample
 	}
 }));
-const packagedCard = /* @__PURE__ */ jsx(ProductCardRoot, {
+const packagedCard$1 = /* @__PURE__ */ jsx(ProductCardRoot, {
 	className: packagedCardClass,
 	children: /* @__PURE__ */ jsx(PackagedCardParts, {})
 });
@@ -1814,7 +2089,7 @@ const packagedCard = /* @__PURE__ */ jsx(ProductCardRoot, {
 function CatalogProducts({ className, children }) {
 	const catalog = useCatalogInternal("CatalogProducts");
 	const customEmpty = useContext(CatalogEmptyContext)?.custom ?? false;
-	const card = hasChildren(children) ? children : packagedCard;
+	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 ?? "",
@@ -1827,16 +2102,16 @@ function CatalogProducts({ className, 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 && !customEmpty && /* @__PURE__ */ jsx("p", {
-			className: "py-16 text-center",
+			className: "py-16 text-center text-commerce-muted",
 			children: "No products available."
 		}),
 		/* @__PURE__ */ jsx("div", {
@@ -1847,15 +2122,15 @@ function CatalogProducts({ className, children }) {
 				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
@@ -1877,25 +2152,29 @@ function CatalogEmpty({ className, children }) {
 		children: hasChildren(children) ? children : /* @__PURE__ */ jsx("p", { children: "No products available." })
 	});
 }
-/** First-page and next-page buttons. Renders nothing for samples, which have one page. */
+/**
+* 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",
 		...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"
 			})]
@@ -1908,14 +2187,15 @@ function Catalog({ title, description, showHeader = true, sampleProducts: sample
 		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" })
 		]
 	});
 }
@@ -1956,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];
@@ -1966,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, "");
@@ -2001,10 +2288,16 @@ function ProductDetailsRoot({ productId: productIdProp, className,...props }) {
 	}) });
 }
 function ProductDetailsLoader({ productId, className, children, urlState = true, loading, notFound, error }) {
-	const { config } = useCommerce();
+	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,
@@ -2055,7 +2348,6 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 		if (value$1) next.set(key, value$1);
 		else next.delete(key);
 		setParams(next);
-		setQuantity(1);
 		setImageIndex(0);
 	};
 	const { register, has } = usePartRegistry();
@@ -2070,6 +2362,7 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 		...partProps("product-details-root", className),
 		children: hasChildren(loading) ? loading : /* @__PURE__ */ jsx("p", {
 			role: "status",
+			className: "text-sm text-commerce-muted",
 			children: "Loading product…"
 		})
 	});
@@ -2083,11 +2376,11 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 				retry
 			}, /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("h1", {
-					className: "text-2xl font-semibold",
+					className: "text-2xl font-semibold tracking-tight",
 					children: "Product unavailable"
 				}),
 				/* @__PURE__ */ jsx("p", {
-					className: "my-4 text-red-700",
+					className: `my-4 ${errorNoticeClass}`,
 					children: message(product.error)
 				}),
 				/* @__PURE__ */ jsx("button", {
@@ -2102,10 +2395,10 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 	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",
+			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"
 		})] })
@@ -2134,16 +2427,50 @@ function ProductDetailsLoader({ productId, className, children, urlState = true,
 		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", {
+			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
@@ -2154,7 +2481,9 @@ 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;
@@ -2163,13 +2492,15 @@ function ProductDetailsPurchase({ 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;
@@ -2204,67 +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", {
+	const missing = showMissing && !explicitSkuId;
+	return /* @__PURE__ */ jsx("div", {
 		...partProps("product-details-sku-option"),
-		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", {
+		"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", {
 		...partProps("product-details-option", className),
 		"data-commerce-attribute": option.name,
-		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", {
+		"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"
 				})]
@@ -2273,21 +2692,20 @@ 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;
@@ -2304,59 +2722,137 @@ function ProductDetailsAvailability({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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", {
 		...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. */
+/**
+* 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 } = useProductDetailsInternal("ProductDetailsAddToCart");
+	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", {
+	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: selectedSku ? /* @__PURE__ */ jsx(AddToCartButton, {
-			sku: selectedSku,
-			name,
-			quantity,
-			children
-		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: `${buttonClass} w-full`,
 			disabled: true,
@@ -2370,7 +2866,7 @@ function ProductDetailsAddToCart({ className, children }) {
 			id: reasonId,
 			hidden: true,
 			children: status === "ready" ? "" : disabledReasons[status]
-		})] })
+		})]
 	});
 }
 
@@ -2378,15 +2874,18 @@ function ProductDetailsAddToCart({ className, children }) {
 //#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" })
 			]
 		})]
 	})] });
@@ -2398,9 +2897,21 @@ function ProductDetailsBackLink({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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: renderLabel(children, void 0, "← 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"] }))
 		})
 	});
 }
@@ -2410,16 +2921,16 @@ function ProductDetailsGallery({ className }) {
 	return /* @__PURE__ */ jsxs("div", {
 		...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",
@@ -2432,32 +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", {
 		...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", {
 		...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$1(price.value.value, price.value.currencyCode ?? config.currencyCode) : product.priceRange?.min != null ? `From ${money$1(product.priceRange.min)}` : "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$1(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
+			})] })]
 		})
 	});
 }
@@ -2467,11 +3005,72 @@ function ProductDetailsDescription({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		...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, CatalogEmpty, 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, ProductImage, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCart, useCartItem, useCommerce, useMoney, 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 };