@fluid-app/portal-sdk 0.1.217 → 0.1.219

package/dist/{ListWidget-C7ouNpEo.cjs → ListWidget-DJ-_dMOK.cjs}

@@ -3,13 +3,22 @@ const require_WidgetInteractionContext = require("./WidgetInteractionContext-Bd1
 const require_registries = require("./registries-CpUM406S.cjs");
 const require_purify_es = require("./purify.es-BQcWWtgQ.cjs");
 const require_MediaRenderer = require("./MediaRenderer-D4HnIAbN.cjs");
-const require_scroll_arrows = require("./scroll-arrows-DVwMDTt3.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region ../widgets/src/widgets/list-widget/helpers.ts
+/**
+* Maps the schema's BorderRadiusOptions to a Tailwind `rounded-*` class.
+* `"full"` is converted to `rounded-2xl` because the list item cards and
+* featured section read better as large-radius rectangles than as
+* pill-shaped containers.
+*/
+const cardRadiusClass = (radius) => radius === "full" ? "rounded-2xl" : `rounded-${radius}`;
+//#endregion
 //#region ../widgets/src/widgets/list-widget/FeaturedSection.tsx
 function FeaturedSection({ borderRadius, titleSize, featuredTitle, featuredSubtitle, featuredButtonText, featuredButtonUrl, featuredSubtitleColor, featuredSubtitleSize, asset }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `relative h-full min-h-[300px] w-full overflow-hidden rounded-${borderRadius}`,
+		className: `group relative h-full min-h-[320px] w-full overflow-hidden ${cardRadiusClass(borderRadius)}`,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "absolute inset-0 h-full w-full",
@@ -24,22 +33,29 @@ function FeaturedSection({ borderRadius, titleSize, featuredTitle, featuredSubti
 					controls: false
 				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-black/40" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pointer-events-none absolute inset-0",
+				style: { background: "linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%)" }
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "absolute inset-0 flex flex-col items-start justify-end p-8",
+				className: "absolute inset-0 flex flex-col items-start justify-end p-10",
 				children: [
 					featuredTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: `font-header mb-2 font-bold text-white text-${titleSize === "md" ? "base" : titleSize}`,
+						className: `font-header mb-3 font-medium tracking-tight text-white text-${titleSize === "md" ? "base" : titleSize}`,
 						children: featuredTitle
 					}),
 					featuredSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: `mb-4 text-${featuredSubtitleColor} text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize}`,
+						className: `mb-6 max-w-md text-${featuredSubtitleColor}/80 text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize} leading-relaxed`,
 						children: featuredSubtitle
 					}),
-					featuredButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					featuredButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 						href: featuredButtonUrl || "#",
-						className: `text-foreground bg-white px-6 py-2 font-medium transition-opacity hover:opacity-90 rounded-${borderRadius}`,
-						children: featuredButtonText
+						className: `text-foreground inline-flex items-center gap-2 bg-white px-6 py-3 text-sm font-medium tracking-tight transition-opacity hover:opacity-90 ${cardRadiusClass(borderRadius)}`,
+						children: [featuredButtonText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							className: "transition-transform group-hover:translate-x-0.5",
+							children: "→"
+						})]
 					})
 				]
 			})
@@ -69,34 +85,26 @@ function getStringValue(value) {
 	}
 	return "";
 }
-/**
-* Strips parenthetical text like "(USD)" from price strings.
-* Matches the shop page's stripParentheticalText pattern.
-*/
 function stripParentheticalText(text) {
 	return text.replace(/\s*\([^)]*\)/g, "").trim();
 }
-/**
-* Formats a price for display. Follows the shop page pattern:
-* prices arrive pre-formatted from the API via display_price
-* (e.g. "$19.99", "€15.00 (EUR)") so we just extract the string
-* and strip parenthetical suffixes.
-*/
 function formatPrice(value) {
 	const str = getStringValue(value);
 	if (!str) return "";
 	return stripParentheticalText(str);
 }
 function ListItemCardContent({ item, padding, itemTitleColor, itemTitleSize, descriptionColor, descriptionSize, priceColor, priceSize, originalPriceColor, metaTextColor, metaTextSize, showMetaText }) {
+	const hasPrice = Boolean(item.display_price || item.price);
+	const hasOriginal = Boolean(item.originalPrice);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `flex flex-1 flex-col p-${padding}`,
 		children: [
 			item.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-				className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} font-header mb-1 font-semibold`,
+				className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} font-header mb-1.5 leading-snug font-medium tracking-tight`,
 				children: getStringValue(item.title)
 			}),
 			item.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2 line-clamp-2 overflow-hidden`,
+				className: `text-${descriptionColor}/60 text-${descriptionSize === "md" ? "base" : descriptionSize} mb-3 line-clamp-2 overflow-hidden leading-relaxed`,
 				dangerouslySetInnerHTML: { __html: require_purify_es.purify.sanitize(item.description ?? "", {
 					ALLOWED_TAGS: [
 						"br",
@@ -112,26 +120,46 @@ function ListItemCardContent({ item, padding, itemTitleColor, itemTitleSize, des
 					ALLOWED_ATTR: []
 				}) }
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [(item.display_price || item.price) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
+			(hasPrice || hasOriginal) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-auto flex items-baseline gap-2",
+				children: [hasPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-semibold tracking-tight tabular-nums`,
 					children: formatPrice(item.display_price || item.price)
-				}), item.originalPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
+				}), hasOriginal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `text-${originalPriceColor}/50 text-${descriptionSize === "md" ? "base" : descriptionSize} tabular-nums line-through`,
 					children: formatPrice(item.originalPrice)
 				})]
 			}),
 			showMetaText && (item.qv || item.cv) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
-				children: [item.qv && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["QV: ", getStringValue(item.qv)] }), item.cv && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["CV: ", getStringValue(item.cv)] })]
+				className: `mt-2 flex gap-4 text-${metaTextColor}/70 text-${metaTextSize === "md" ? "base" : metaTextSize} font-medium tracking-wide uppercase`,
+				children: [item.qv && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "opacity-50",
+						children: "QV"
+					}),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "tabular-nums",
+						children: getStringValue(item.qv)
+					})
+				] }), item.cv && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "opacity-50",
+						children: "CV"
+					}),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "tabular-nums",
+						children: getStringValue(item.cv)
+					})
+				] })]
 			})
 		]
 	});
 }
 function DiscountBadge({ discount }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "bg-destructive text-destructive-foreground absolute top-2 right-2 z-10 rounded-md px-2 py-1 text-xs font-bold",
+		className: "bg-background text-foreground absolute top-3 left-3 z-10 rounded-full px-2.5 py-1 text-[10px] font-semibold tracking-[0.08em] uppercase",
 		children: getStringValue(discount)
 	});
 }
@@ -140,7 +168,7 @@ function DiscountBadge({ discount }) {
 const getImageUrl$1 = (item) => {
 	return item.imageUrl || item.image;
 };
-const getAspectRatioClass$1 = (ratio) => {
+const getAspectRatioClass = (ratio) => {
 	return {
 		square: "aspect-square",
 		landscape: "aspect-video",
@@ -164,9 +192,9 @@ function UnorderedList({ items, columns, gap, borderRadius, imageAspectRatio, sh
 		className: `grid ${gridClass} gap-${require_registries.gapValues[gap]}`,
 		children: items.map((item) => {
 			const imageUrl = getImageUrl$1(item);
-			const aspectRatioClass = getAspectRatioClass$1(imageAspectRatio);
+			const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `relative flex flex-col rounded-${borderRadius === "full" ? "2xl" : borderRadius} bg-background overflow-hidden shadow-sm transition-shadow hover:shadow-md ${onItemClick ? "cursor-pointer" : ""}`,
+				className: `group relative flex flex-col ${onItemClick ? "cursor-pointer" : ""}`,
 				...onItemClick ? {
 					role: "button",
 					tabIndex: 0,
@@ -178,17 +206,16 @@ function UnorderedList({ items, columns, gap, borderRadius, imageAspectRatio, sh
 						}
 					}
 				} : {},
-				children: [
-					showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiscountBadge, { discount: item.discount }),
-					imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `w-full ${aspectRatioClass} overflow-hidden`,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							src: imageUrl,
-							alt: item.title || "Product",
-							className: "h-full w-full object-cover"
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
+				children: [imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `relative w-full ${aspectRatioClass} bg-muted/30 overflow-hidden ${cardRadiusClass(borderRadius)}`,
+					children: [showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiscountBadge, { discount: item.discount }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: imageUrl,
+						alt: item.title || "Product",
+						className: "h-full w-full object-cover transition-opacity duration-300 group-hover:opacity-90"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
 						item,
 						padding,
 						itemTitleColor,
@@ -202,43 +229,20 @@ function UnorderedList({ items, columns, gap, borderRadius, imageAspectRatio, sh
 						metaTextSize,
 						showMetaText
 					})
-				]
+				})]
 			}, item.id);
 		})
 	});
 }
 //#endregion
 //#region ../widgets/src/widgets/list-widget/OrderedList.tsx
-const SCROLL_ITEM_WIDTH = 300;
 const getImageUrl = (item) => {
 	return item.imageUrl || item.image;
 };
-const getAspectRatioClass = (ratio) => {
-	return {
-		square: "aspect-square",
-		landscape: "aspect-video",
-		portrait: "aspect-[3/4]"
-	}[ratio];
-};
-const largeNumberSizes = {
-	xs: "8rem",
-	sm: "10rem",
-	md: "12rem",
-	lg: "14rem",
-	xl: "16rem",
-	"2xl": "20rem"
-};
-function OrderedList({ items, scrollAxis, gap, borderRadius, imageAspectRatio, showBadge, padding, itemTitleColor, itemTitleSize, descriptionColor, descriptionSize, priceColor, priceSize, originalPriceColor, metaTextColor, metaTextSize, numberColor, numberSize, showMetaText }) {
-	const scrollContainerRef = (0, react.useRef)(null);
-	const scrollByAmount = (direction) => {
-		const container = scrollContainerRef.current;
-		if (!container) return;
-		const scrollAmount = SCROLL_ITEM_WIDTH + (parseFloat(getComputedStyle(container).gap) || 0);
-		container.scrollTo({
-			left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
-			behavior: "smooth"
-		});
-	};
+const formatRank = (n) => n < 10 ? `0${n}` : String(n);
+function OrderedList({ items, scrollAxis, gap, borderRadius, imageAspectRatio: _imageAspectRatio, showBadge, padding, itemTitleColor, itemTitleSize, descriptionColor, descriptionSize, priceColor, priceSize, originalPriceColor, metaTextColor, metaTextSize, numberColor, numberSize, showMetaText, scrollContainerRef: externalScrollRef }) {
+	const internalScrollRef = (0, react.useRef)(null);
+	const scrollContainerRef = externalScrollRef ?? internalScrollRef;
 	const { onItemClick } = require_WidgetInteractionContext.useWidgetInteraction();
 	const interactionProps = (item) => onItemClick ? {
 		role: "button",
@@ -264,63 +268,84 @@ function OrderedList({ items, scrollAxis, gap, borderRadius, imageAspectRatio, s
 		metaTextSize,
 		showMetaText
 	};
-	if (scrollAxis === "horizontal") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative overflow-hidden",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	if (scrollAxis === "horizontal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "relative",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: scrollContainerRef,
-			className: `flex gap-${require_registries.gapValues[gap]} scrollbar-hide overflow-x-auto overflow-y-hidden scroll-smooth pb-2`,
+			className: `flex gap-${require_registries.gapValues[gap]} scrollbar-hide overflow-x-auto overflow-y-hidden scroll-smooth`,
 			children: items.map((item, index) => {
 				const imageUrl = getImageUrl(item);
-				const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
+				const rank = index + 1;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: `relative flex w-[300px] flex-shrink-0 flex-col ${onItemClick ? "cursor-pointer" : ""}`,
+					className: `group relative flex flex-shrink-0 flex-col ${onItemClick ? "cursor-pointer" : ""}`,
 					...interactionProps(item),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `absolute top-0 left-0 text-${numberColor} z-0 leading-none font-bold opacity-20`,
-						style: { fontSize: largeNumberSizes[numberSize] },
-						children: index + 1
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: `relative z-10 ml-20 flex flex-1 flex-col rounded-${borderRadius === "full" ? "2xl" : borderRadius} bg-background overflow-hidden shadow-sm transition-shadow hover:shadow-md`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-end",
 						children: [
-							showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiscountBadge, { discount: item.discount }),
-							imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `w-full ${aspectRatioClass} overflow-hidden`,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "sr-only",
+								children: [
+									"Rank ",
+									rank,
+									": "
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `text-${numberColor} pointer-events-none flex-shrink-0 font-black italic tabular-nums select-none`,
+								style: {
+									fontSize: "11rem",
+									lineHeight: "0.82",
+									letterSpacing: "-0.06em"
+								},
+								"aria-hidden": "true",
+								children: rank
+							}),
+							imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: `relative aspect-[3/4] w-[200px] flex-shrink-0 ${cardRadiusClass(borderRadius)} bg-muted/30 overflow-hidden`,
+								children: [showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiscountBadge, { discount: item.discount }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 									src: imageUrl,
 									alt: item.title || "Product",
 									className: "h-full w-full object-cover"
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
-								item,
-								...contentProps
+								})]
 							})
 						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mt-5 ml-auto w-[200px]",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
+							item,
+							...contentProps
+						})
 					})]
 				}, item.id);
 			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "absolute inset-x-0 top-1/2 z-20 flex w-full -translate-y-1/2 items-center justify-between px-8",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_scroll_arrows.ScrollArrows, {
-				onPrevious: () => scrollByAmount("prev"),
-				onNext: () => scrollByAmount("next")
-			})
-		})]
+		})
 	});
 	if (scrollAxis === "vertical") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `flex flex-col gap-${require_registries.gapValues[gap]}`,
 		children: items.map((item, index) => {
 			const imageUrl = getImageUrl(item);
+			const rank = index + 1;
+			const isLast = index === items.length - 1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `relative flex gap-${require_registries.gapValues[gap]} rounded-${borderRadius === "full" ? "2xl" : borderRadius} bg-background overflow-hidden shadow-sm transition-shadow hover:shadow-md ${`p-${padding}`} ${onItemClick ? "cursor-pointer" : ""}`,
+				className: `group relative flex items-center gap-${require_registries.gapValues[gap]} py-6 ${!isLast ? "border-b" : ""} ${onItemClick ? "cursor-pointer" : ""}`,
+				style: !isLast ? { borderColor: "color-mix(in oklch, var(--color-foreground) 8%, transparent)" } : void 0,
 				...interactionProps(item),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `flex-shrink-0 text-${numberColor} text-${numberSize === "md" ? "base" : numberSize} flex w-16 items-center justify-center font-bold`,
-						children: index + 1
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "sr-only",
+						children: [
+							"Rank ",
+							rank,
+							": "
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `text-${numberColor} font-header w-14 flex-shrink-0 text-${numberSize === "md" ? "base" : numberSize} leading-none font-light tracking-tight italic`,
+						"aria-hidden": "true",
+						children: formatRank(rank)
 					}),
 					imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "h-24 w-24 flex-shrink-0 overflow-hidden rounded-md",
+						className: `relative h-16 w-16 flex-shrink-0 overflow-hidden ${cardRadiusClass(borderRadius)} bg-muted/30`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 							src: imageUrl,
 							alt: item.title || "Product",
@@ -328,14 +353,14 @@ function OrderedList({ items, scrollAxis, gap, borderRadius, imageAspectRatio, s
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex-1",
+						className: "min-w-0 flex-1",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemCardContent, {
 							item,
 							...contentProps
 						})
 					}),
-					showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "bg-destructive text-destructive-foreground absolute top-2 right-2 rounded-md px-2 py-1 text-xs font-bold",
+					showBadge && item.discount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-muted ml-2 flex-shrink-0 text-[10px] font-semibold tracking-[0.08em] uppercase",
 						children: getStringValue(item.discount)
 					})
 				]
@@ -393,17 +418,53 @@ function ListWidget({ listType = "unordered", scrollAxis = "horizontal", titleEn
 	const shouldShowFeaturedSection = showFeaturedSection && hasFeaturedAsset;
 	const backgroundColor = background.color || "background";
 	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	const isOrderedHorizontal = listType === "ordered" && scrollAxis === "horizontal";
+	const showScrollArrows = isOrderedHorizontal && hasItems && displayItems.length > 1;
+	const { scrollContainerRef, canScrollPrev, canScrollNext, scrollByAmount } = useHorizontalScrollState({
+		enabled: showScrollArrows,
+		contentLength: displayItems.length
+	});
+	const hasTitle = titleEnabled && title;
+	const showTitleRow = hasTitle || showScrollArrows;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `@container bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${require_registries.borderWidthClasses[borderWidth]} ${borderWidth !== "none" ? require_registries.borderColorClasses[borderColor] : ""} ${className}`,
 		style: { backgroundImage },
 		...props,
-		children: [titleEnabled && title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-			className: `text-${titleColor} text-${titleSize === "md" ? "base" : titleSize} font-header mb-6 font-bold`,
-			children: title
+		children: [showTitleRow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-8 flex items-center justify-between gap-4",
+			children: [hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: `text-${titleColor} text-${titleSize === "md" ? "base" : titleSize} font-header leading-tight font-medium tracking-tight`,
+				children: title
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), showScrollArrows && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => scrollByAmount("prev"),
+					disabled: !canScrollPrev,
+					"aria-label": "Previous items",
+					className: `text-${numberColor} flex size-9 items-center justify-center rounded-full transition-opacity hover:opacity-60 disabled:cursor-not-allowed disabled:opacity-20`,
+					style: { boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${numberColor}) 25%, transparent)` },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+						"aria-hidden": "true",
+						className: "size-4"
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => scrollByAmount("next"),
+					disabled: !canScrollNext,
+					"aria-label": "Next items",
+					className: `text-${numberColor} flex size-9 items-center justify-center rounded-full transition-opacity hover:opacity-60 disabled:cursor-not-allowed disabled:opacity-20`,
+					style: { boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${numberColor}) 25%, transparent)` },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+						"aria-hidden": "true",
+						className: "size-4"
+					})
+				})]
+			})]
 		}), !hasItems ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "border-border bg-muted flex items-center justify-center rounded-md border-2 border-dashed py-12 text-center",
+			className: "flex items-center justify-center py-20 text-center",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-muted",
+				className: "text-muted/70 text-sm tracking-tight",
 				children: "No items to display"
 			})
 		}) : shouldShowFeaturedSection ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -432,6 +493,7 @@ function ListWidget({ listType = "unordered", scrollAxis = "horizontal", titleEn
 					scrollAxis,
 					numberColor,
 					numberSize,
+					scrollContainerRef: isOrderedHorizontal ? scrollContainerRef : void 0,
 					...itemStyleProps
 				})
 			})]
@@ -444,10 +506,73 @@ function ListWidget({ listType = "unordered", scrollAxis = "horizontal", titleEn
 			scrollAxis,
 			numberColor,
 			numberSize,
+			scrollContainerRef: isOrderedHorizontal ? scrollContainerRef : void 0,
 			...itemStyleProps
 		})]
 	});
 }
+const SCROLL_BUTTON_AMOUNT = 300;
+const SCROLL_EDGE_TOLERANCE = 4;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function useHorizontalScrollState({ enabled, contentLength }) {
+	const scrollContainerRef = (0, react.useRef)(null);
+	const [canScrollPrev, setCanScrollPrev] = (0, react.useState)(false);
+	const [canScrollNext, setCanScrollNext] = (0, react.useState)(false);
+	const resetScrollState = (0, react.useCallback)(() => {
+		setCanScrollPrev(false);
+		setCanScrollNext(false);
+	}, []);
+	const updateScrollState = (0, react.useCallback)(() => {
+		const el = scrollContainerRef.current;
+		if (!enabled || !el) {
+			resetScrollState();
+			return;
+		}
+		setCanScrollPrev(el.scrollLeft > SCROLL_EDGE_TOLERANCE);
+		setCanScrollNext(el.scrollLeft + el.clientWidth < el.scrollWidth - SCROLL_EDGE_TOLERANCE);
+	}, [enabled, resetScrollState]);
+	useIsomorphicLayoutEffect(() => {
+		updateScrollState();
+	}, [updateScrollState]);
+	(0, react.useEffect)(() => {
+		if (!enabled) {
+			resetScrollState();
+			return;
+		}
+		const el = scrollContainerRef.current;
+		if (!el) {
+			resetScrollState();
+			return;
+		}
+		updateScrollState();
+		el.addEventListener("scroll", updateScrollState, { passive: true });
+		const resize = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateScrollState) : void 0;
+		resize?.observe(el);
+		return () => {
+			el.removeEventListener("scroll", updateScrollState);
+			resize?.disconnect();
+		};
+	}, [
+		enabled,
+		resetScrollState,
+		updateScrollState,
+		contentLength
+	]);
+	return {
+		scrollContainerRef,
+		canScrollPrev,
+		canScrollNext,
+		scrollByAmount: (0, react.useCallback)((direction) => {
+			const el = scrollContainerRef.current;
+			if (!el) return;
+			const amount = SCROLL_BUTTON_AMOUNT + (parseFloat(getComputedStyle(el).gap) || 0);
+			el.scrollTo({
+				left: el.scrollLeft + (direction === "next" ? amount : -amount),
+				behavior: "smooth"
+			});
+		}, [])
+	};
+}
 const listWidgetPropertySchema = {
 	widgetType: "ListWidget",
 	displayName: "List",
@@ -578,7 +703,7 @@ const listWidgetPropertySchema = {
 			key: "imageAspectRatio",
 			label: "Image Aspect Ratio",
 			type: "buttonGroup",
-			description: "Aspect ratio for item images",
+			description: "Aspect ratio for item images (unordered list — ordered layouts use a fixed ratio per axis)",
 			defaultValue: "square",
 			options: [
 				{
@@ -595,7 +720,11 @@ const listWidgetPropertySchema = {
 				}
 			],
 			tab: "styling",
-			group: "List Configuration"
+			group: "List Configuration",
+			requiresKeyValue: {
+				key: "listType",
+				value: "unordered"
+			}
 		},
 		{
 			key: "showBadge",
@@ -666,14 +795,17 @@ const listWidgetPropertySchema = {
 		require_registries.getFontSizeField({
 			key: "numberSize",
 			label: "Number Font Size",
-			description: "Size of ordered list numbers",
+			description: "Size of ordered list numbers (vertical scroll only — horizontal uses a fixed editorial size)",
 			defaultValue: "2xl",
 			tab: "styling",
 			group: "Ordered List Configuration",
-			requiresKeyValue: {
+			requiresKeyValue: [{
 				key: "listType",
 				value: "ordered"
-			}
+			}, {
+				key: "scrollAxis",
+				value: "vertical"
+			}]
 		}),
 		require_registries.getColorField({
 			key: "itemTitleColor",
@@ -919,4 +1051,4 @@ Object.defineProperty(exports, "listWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ListWidget-C7ouNpEo.cjs.map
+//# sourceMappingURL=ListWidget-DJ-_dMOK.cjs.map