@pisell/private-materials 6.12.376 → 6.12.377

package/es/components/HDLKiosk/locales.js

@@ -3,6 +3,8 @@
 const localeTexts = {
 	en: {
 		"pisell2.hdl-kiosk.primary-select": "Choose your item",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "Build your bowl",
+		"pisell2.hdl-kiosk.primary-standard-zone": "Set meals",
 		"pisell2.hdl-kiosk.primary-select-description": "Tap an item to continue ordering",
 		"pisell2.hdl-kiosk.primary-select-close": "Close item selection",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "No product image",
@@ -254,6 +256,8 @@ const localeTexts = {
 	},
 	"zh-CN": {
 		"pisell2.hdl-kiosk.primary-select": "请选择商品",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "自选称重",
+		"pisell2.hdl-kiosk.primary-standard-zone": "套餐",
 		"pisell2.hdl-kiosk.primary-select-description": "点击商品，继续点单",
 		"pisell2.hdl-kiosk.primary-select-close": "关闭商品选择",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "暂无商品图片",
@@ -505,6 +509,8 @@ const localeTexts = {
 	},
 	"zh-HK": {
 		"pisell2.hdl-kiosk.primary-select": "請選擇商品",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "自選稱重",
+		"pisell2.hdl-kiosk.primary-standard-zone": "套餐",
 		"pisell2.hdl-kiosk.primary-select-description": "點擊商品，繼續點單",
 		"pisell2.hdl-kiosk.primary-select-close": "關閉商品選擇",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "暫無商品圖片",
@@ -756,6 +762,8 @@ const localeTexts = {
 	},
 	ja: {
 		"pisell2.hdl-kiosk.primary-select": "商品を選んでください",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "量り売り",
+		"pisell2.hdl-kiosk.primary-standard-zone": "セットメニュー",
 		"pisell2.hdl-kiosk.primary-select-description": "商品をタップして注文を続ける",
 		"pisell2.hdl-kiosk.primary-select-close": "商品選択を閉じる",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "商品画像がありません",
@@ -1007,6 +1015,8 @@ const localeTexts = {
 	},
 	pt: {
 		"pisell2.hdl-kiosk.primary-select": "Escolha o produto",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "Escolha por peso",
+		"pisell2.hdl-kiosk.primary-standard-zone": "Menus de conjunto",
 		"pisell2.hdl-kiosk.primary-select-description": "Toque num produto para continuar o pedido",
 		"pisell2.hdl-kiosk.primary-select-close": "Fechar seleção de produto",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "Sem imagem do produto",

package/es/components/HDLKiosk/slices/customization/PrimaryProductSelection/assets/order-background.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1920" viewBox="0 0 1080 1920" fill="none">
+  <defs>
+    <pattern id="linen" width="12" height="12" patternUnits="userSpaceOnUse">
+      <path d="M0 3h12M0 9h12M3 0v12M9 0v12" stroke="#bba68c" stroke-width=".6" opacity=".07"/>
+      <path d="M0 4h12M0 10h12M4 0v12M10 0v12" stroke="#fffdf6" stroke-width=".6" opacity=".25"/>
+    </pattern>
+    <pattern id="cloth-edge" width="28" height="28" patternUnits="userSpaceOnUse">
+      <path d="m-7 7 28-28M0 28 28 0m-7 49 28-28" stroke="#9b4050" stroke-width="2" opacity=".06"/>
+    </pattern>
+  </defs>
+  <path fill="#eee8dc" d="M0 0h1080v1920H0z"/>
+  <path fill="url(#linen)" d="M0 0h1080v1920H0z"/>
+  <path fill="url(#cloth-edge)" d="M0 0h32v1920H0zm1048 0h32v1920h-32z"/>
+  <g stroke="#a88570" stroke-width="2" opacity=".2">
+    <ellipse cx="1080" cy="320" rx="184" ry="66"/>
+    <ellipse cx="1080" cy="320" rx="159" ry="47"/>
+    <path d="M900 332c29 117 84 164 180 164s151-47 180-164m-290 150h220"/>
+    <path d="m-32 730 143-320m-124 327L133 421" stroke-width="5" stroke-linecap="round"/>
+    <ellipse cx="-30" cy="1235" rx="170" ry="61"/>
+    <ellipse cx="-30" cy="1235" rx="146" ry="43"/>
+    <path d="M-196 1246c26 107 76 150 166 150s140-43 166-150"/>
+    <path d="m992 1530 128-296m-109 304 130-293" stroke-width="5" stroke-linecap="round"/>
+  </g>
+</svg>

package/es/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.js

@@ -1,3 +1,4 @@
+import useStableInstanceId from "../../../../../hooks/useStableInstanceId.js";
 import { useHDLKioskBottomBar, useHDLKioskBottomBarController } from "../../../components/shell/HDLKioskBottomBarHost/index.js";
 import { HDLKioskOrderSummary } from "../../../components/shell/HDLKioskOrderSummary/index.js";
 import { resolveHDLPrimaryProduct, resolveHDLProductText } from "../../../product.js";
@@ -8,14 +9,15 @@ import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "re
 import { locales } from "@pisell/utils";
 import Decimal from "decimal.js";
 //#region src/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.tsx
-function ProductImage({ src }) {
+function ProductImage({ src, name }) {
 	const [failed, setFailed] = useState(false);
 	return /* @__PURE__ */ React.createElement("span", {
 		className: "hdl-ps-product-image",
 		"aria-hidden": "true"
-	}, failed || !src ? /* @__PURE__ */ React.createElement("span", { className: "hdl-ps-image-fallback" }, locales.getText("pisell2.hdl-kiosk.primary-image-unavailable")) : /* @__PURE__ */ React.createElement("img", {
+	}, failed || !src ? /* @__PURE__ */ React.createElement("span", { className: "hdl-ps-image-fallback" }, /* @__PURE__ */ React.createElement("strong", null, name), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.hdl-kiosk.primary-image-unavailable"))) : /* @__PURE__ */ React.createElement("img", {
 		src,
 		alt: "",
+		draggable: false,
 		onError: () => setFailed(true)
 	}));
 }
@@ -23,6 +25,8 @@ function PrimaryProductSelection({ products, configuredCount, orderBar, capabili
 	const scale = useHDLScaleSnapshot();
 	const delivered = useRef(false);
 	const heading = useRef(null);
+	const selectionId = useStableInstanceId("hdl-primary-selection");
+	const headingId = `${selectionId}-title`;
 	const { currencySymbol } = orderBar;
 	const items = [...products].sort((left, right) => {
 		const leftSort = Number(left.sort);
@@ -35,11 +39,22 @@ function PrimaryProductSelection({ products, configuredCount, orderBar, capabili
 		return {
 			product,
 			facts,
+			name: (facts === null || facts === void 0 ? void 0 : facts.name) || resolveHDLProductText(product.title) || String(product.id),
+			imageUrl: typeof product.cover === "string" ? product.cover : void 0,
 			subtitle: resolveHDLProductText(product.subtitle),
 			disabled: unavailable || scaleUnavailable,
 			reason: locales.getText(scaleUnavailable ? "pisell2.hdl-kiosk.entry-scale-unavailable" : "pisell2.hdl-kiosk.primary-unavailable")
 		};
 	});
+	const groups = ["weighted", "standard"].map((kind) => ({
+		kind,
+		title: locales.getText(kind === "weighted" ? "pisell2.hdl-kiosk.primary-weighted-zone" : "pisell2.hdl-kiosk.primary-standard-zone"),
+		items: items.filter((item) => {
+			var _item$product$variant, _item$facts;
+			const variants = (_item$product$variant = item.product.variant) !== null && _item$product$variant !== void 0 ? _item$product$variant : item.product.variants;
+			return (((_item$facts = item.facts) === null || _item$facts === void 0 ? void 0 : _item$facts.kind) === "weighted" || Number(item.product.open_sold_weight) === 1 || Array.isArray(variants) && variants.some((variant) => Number(variant === null || variant === void 0 ? void 0 : variant.open_sold_weight) === 1)) === (kind === "weighted");
+		})
+	})).filter((group) => group.items.length > 0);
 	const select = (item) => {
 		if (busy || item.disabled || !item.facts || delivered.current) return;
 		delivered.current = true;
@@ -90,45 +105,51 @@ function PrimaryProductSelection({ products, configuredCount, orderBar, capabili
 	]));
 	return /* @__PURE__ */ React.createElement("section", {
 		className: "hdl-primary-selection",
-		"aria-labelledby": "hdl-primary-selection-title"
-	}, /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-dialog" }, /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-content" }, /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-selection" }, /* @__PURE__ */ React.createElement("header", { className: "hdl-ps-heading" }, /* @__PURE__ */ React.createElement("h2", {
-		id: "hdl-primary-selection-title",
+		"aria-labelledby": headingId
+	}, /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-dialog" }, /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-content" }, /* @__PURE__ */ React.createElement("h2", {
+		className: "hdl-ps-sr-only",
+		id: headingId,
 		ref: heading,
 		tabIndex: -1
-	}, title), /* @__PURE__ */ React.createElement("p", { className: "hdl-ps-description" }, locales.getText("pisell2.hdl-kiosk.primary-select-description"))), /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-products" }, items.map((item) => {
-		var _item$facts, _item$facts2, _item$facts3;
-		return /* @__PURE__ */ React.createElement("button", {
-			className: "hdl-ps-product",
-			key: String(item.product.id),
-			type: "button",
-			disabled: busy || item.disabled,
-			onClick: () => select(item)
-		}, /* @__PURE__ */ React.createElement(ProductImage, {
-			key: (_item$facts = item.facts) === null || _item$facts === void 0 ? void 0 : _item$facts.imageUrl,
-			src: (_item$facts2 = item.facts) === null || _item$facts2 === void 0 ? void 0 : _item$facts2.imageUrl
-		}), /* @__PURE__ */ React.createElement("span", { className: "hdl-ps-product-details" }, /* @__PURE__ */ React.createElement("strong", { className: "hdl-ps-product-name" }, ((_item$facts3 = item.facts) === null || _item$facts3 === void 0 ? void 0 : _item$facts3.name) || resolveHDLProductText(item.product.title) || String(item.product.id)), item.subtitle ? /* @__PURE__ */ React.createElement("span", { className: "hdl-ps-product-subtitle" }, item.subtitle) : null, item.disabled ? /* @__PURE__ */ React.createElement("small", { className: "hdl-ps-unavailable" }, item.reason) : null), /* @__PURE__ */ React.createElement("span", {
-			className: "hdl-ps-select-arrow",
-			"aria-hidden": "true"
-		}, /* @__PURE__ */ React.createElement("svg", {
-			viewBox: "0 0 24 24",
-			fill: "none"
-		}, /* @__PURE__ */ React.createElement("path", {
-			d: "M5 12h14m-6-6 6 6-6 6",
-			stroke: "currentColor",
-			strokeWidth: "1.8",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}))));
-	})), /* @__PURE__ */ React.createElement("button", {
+	}, title), /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-choices" }, groups.map((group) => /* @__PURE__ */ React.createElement("div", {
+		className: "hdl-ps-group",
+		key: group.kind,
+		"data-zone": group.kind,
+		role: "group",
+		"aria-labelledby": `${selectionId}-${group.kind}`
+	}, /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-marker" }, /* @__PURE__ */ React.createElement("h3", { id: `${selectionId}-${group.kind}` }, group.title), /* @__PURE__ */ React.createElement("span", {
+		className: "hdl-ps-marker-line",
+		"aria-hidden": "true"
+	})), /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-products" }, group.items.map((item) => /* @__PURE__ */ React.createElement("div", {
+		className: "hdl-ps-image-area",
+		key: String(item.product.id)
+	}, /* @__PURE__ */ React.createElement("div", { className: "hdl-ps-poster-area" }, /* @__PURE__ */ React.createElement("button", {
+		className: "hdl-ps-product",
+		type: "button",
+		"aria-label": item.name,
+		"aria-describedby": item.disabled ? `${selectionId}-${item.product.id}-unavailable` : void 0,
+		disabled: busy || item.disabled,
+		onClick: () => select(item)
+	}, /* @__PURE__ */ React.createElement(ProductImage, {
+		key: item.imageUrl,
+		src: item.imageUrl,
+		name: item.name
+	}), item.subtitle ? /* @__PURE__ */ React.createElement("span", { className: "hdl-ps-sr-only" }, item.subtitle) : null)), item.disabled ? /* @__PURE__ */ React.createElement("small", {
+		className: "hdl-ps-unavailable",
+		id: `${selectionId}-${item.product.id}-unavailable`
+	}, item.reason) : null))))), !items.length ? /* @__PURE__ */ React.createElement("p", {
+		className: "hdl-ps-empty",
+		role: "status"
+	}, locales.getText("pisell2.hdl-kiosk.primary-unavailable")) : null), /* @__PURE__ */ React.createElement("button", {
 		type: "button",
-		className: "hdl-bowl-dialog-button hdl-ps-skip",
+		className: "hdl-ps-skip",
 		disabled: busy,
 		onClick: () => {
 			if (busy || delivered.current) return;
 			delivered.current = true;
 			if (onCancel() === false) delivered.current = false;
 		}
-	}, locales.getText("pisell2.hdl-kiosk.customization-skip")), !items.length ? /* @__PURE__ */ React.createElement("p", { role: "status" }, locales.getText("pisell2.hdl-kiosk.primary-unavailable")) : null))));
+	}, locales.getText("pisell2.hdl-kiosk.customization-skip")))));
 }
 //#endregion
 export { PrimaryProductSelection };

package/es/components/HDLKiosk/slices/customization/PrimaryProductSelection/index.less

@@ -1,110 +1,140 @@
-// Fill the workflow content area while leaving room for the shell's floating bar.
+// The shell owns the header and floating cart bar; fill the space between them.
 .pisell-hdl-kiosk .hdl-primary-selection {
+  container-type: inline-size;
   display: flex;
+  flex: 1;
   width: 100%;
   min-width: 0;
   min-height: 0;
-  flex: 1;
-  overflow: hidden;
   padding-bottom: var(--hdl-bottom-bar-clearance);
-  background: #faf8f5;
+  overflow: hidden;
+  background: #eee8dc url('./assets/order-background.svg') center top /
+    max(100%, 1080px) auto;
 }
 
 .hdl-ps-dialog {
-  --hdl-ps-red: #b20d12;
-  --hdl-ps-ink: #292523;
-  --hdl-ps-muted: #736b65;
   display: flex;
-  width: 100%;
+  flex: 1;
   min-width: 0;
   min-height: 0;
-  flex-direction: column;
-  padding: 24px;
-  overflow: hidden;
-  color: var(--hdl-ps-ink);
-  font-size: 16px;
-  line-height: 1.5;
+  color: #252323;
   text-align: left;
-  animation: hdl-ps-dialog-enter 180ms ease-out both;
 }
 .hdl-ps-dialog button {
-  font: inherit;
+  appearance: none;
+  font-family: inherit;
   cursor: pointer;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
 }
-.hdl-ps-dialog button:focus-visible {
-  outline: 3px solid #2563eb;
-  outline-offset: 4px;
-}
 .hdl-ps-content {
   display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: clamp(12px, 1.85cqw, 20px);
+  min-width: 0;
   min-height: 0;
+  padding: clamp(12px, 1.67cqw, 18px) clamp(24px, 4.9cqw, 53px);
+}
+.hdl-ps-choices {
+  --hdl-ps-gap: clamp(24px, 3.7cqw, 40px);
+  display: flex;
   flex: 1;
+  flex-direction: column;
+  gap: var(--hdl-ps-gap);
+  min-height: 0;
   overflow: auto;
   overscroll-behavior: contain;
-  padding: 24px 8px;
+  // Leave room for keyboard focus inside the scroll region.
+  padding: 4px;
+  margin: -4px;
 }
-.hdl-ps-selection {
-  width: min(960px, 100%);
-  min-width: 0;
+.hdl-ps-group {
+  --hdl-ps-zone-ink: #963047;
+  --hdl-ps-zone-line: #d5bfa5;
+  position: relative;
+  display: flex;
+  // Every product keeps its own height; additional products scroll instead of shrinking.
   flex: none;
-  margin: auto;
+  flex-direction: column;
+  gap: clamp(4px, 0.74cqw, 8px);
+  min-width: 0;
+  padding: clamp(8px, 1.4cqw, 15px);
+  border: 1px solid #cfbda5;
+  border-radius: clamp(18px, 2.8cqw, 30px);
+  background: #faf4e8;
+}
+.hdl-ps-group[data-zone='standard'] {
+  --hdl-ps-zone-ink: #3f4b45;
+  --hdl-ps-zone-line: #c1c7bd;
+  border-color: #bfc6bc;
+  background: #f2f4ee;
+}
+.hdl-ps-group + .hdl-ps-group::before {
+  position: absolute;
+  inset: calc(var(--hdl-ps-gap) / -2) 0 auto;
+  height: 1px;
+  background: #cbbba6;
+  content: '';
+  pointer-events: none;
 }
-.hdl-ps-heading {
-  margin: 0 0 32px;
-  text-align: center;
+.hdl-ps-marker {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: clamp(12px, 1.8cqw, 20px);
+  min-height: clamp(26px, 3.9cqw, 42px);
+  padding-inline: clamp(4px, 0.74cqw, 8px);
 }
-.hdl-ps-heading h2 {
+.hdl-ps-marker h3 {
+  flex: none;
   margin: 0;
-  font-size: 40px;
-  font-weight: 850;
-  line-height: 1.25;
-  letter-spacing: -0.025em;
-  outline: none;
+  color: var(--hdl-ps-zone-ink);
+  font-size: clamp(18px, 3.15cqw, 34px);
+  font-weight: 650;
+  line-height: 1.2;
 }
-.hdl-ps-heading .hdl-ps-description {
-  margin: 10px 0 0;
-  font-size: 20px;
-  color: var(--hdl-ps-muted);
+.hdl-ps-marker-line {
+  flex: 1;
+  height: 1px;
+  background: var(--hdl-ps-zone-line);
 }
 .hdl-ps-products {
-  --hdl-ps-product-height: 250px;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: clamp(12px, 1.85cqw, 20px);
+  min-width: 0;
 }
-.hdl-ps-products > :first-child,
-.hdl-ps-products > :last-child:nth-child(even) {
-  grid-column: 1 / -1;
+.hdl-ps-image-area {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding: 4px;
 }
-.hdl-ps-dialog .hdl-ps-product {
-  display: grid;
-  grid-template-columns: minmax(0, 24%) minmax(0, 1fr) auto;
-  align-items: center;
+.hdl-ps-poster-area {
+  width: 100%;
   min-width: 0;
-  min-height: var(--hdl-ps-product-height);
-  padding: 12px;
-  border: 1.5px solid #d8d1ca;
-  border-radius: 24px;
-  color: var(--hdl-ps-ink);
-  background: #fff;
-  text-align: left;
-  transition: border-color 160ms, background 160ms, box-shadow 160ms;
+  min-height: 0;
 }
-.hdl-ps-dialog .hdl-ps-products > :first-child {
-  min-height: calc(var(--hdl-ps-product-height) * 1.4);
+.hdl-ps-dialog .hdl-ps-product {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: clamp(10px, 1.6cqw, 18px);
+  background: transparent;
+  overflow: hidden;
+  transition: transform 160ms ease, filter 160ms ease;
 }
 .hdl-ps-product-image {
   position: relative;
-  display: grid;
-  place-items: center;
+  display: block;
   width: 100%;
-  min-height: 0;
-  aspect-ratio: 1 / 1;
-  overflow: hidden;
-  border-radius: 14px;
-  background: #f1ece6;
+  // Keep every poster at the same display ratio, including square source images.
+  aspect-ratio: 16 / 10;
 }
 .hdl-ps-product-image img {
   position: absolute;
@@ -113,86 +143,106 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .hdl-ps-image-fallback {
-  padding: 12px;
-  color: var(--hdl-ps-muted);
-  text-align: center;
-}
-.hdl-ps-product-details {
+  position: absolute;
+  inset: 0;
   display: flex;
-  min-width: 0;
   align-self: stretch;
-  flex-direction: column;
+  align-items: center;
   justify-content: center;
-  padding: 12px 28px;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background: #ebe5da;
+  color: #645b52;
+  font-size: clamp(16px, 2.2cqw, 24px);
+  text-align: center;
 }
-.hdl-ps-product-name {
-  display: block;
-  font-size: 32px;
-  font-weight: 800;
-  line-height: 1.3;
+.hdl-ps-image-fallback strong {
+  color: #252323;
+  font-size: clamp(20px, 3cqw, 32px);
 }
-.hdl-ps-product-subtitle {
-  display: block;
+.hdl-ps-unavailable {
+  flex: none;
   margin-top: 8px;
-  font-size: 20px;
-  line-height: 1.5;
-  color: var(--hdl-ps-muted);
+  color: #645b52;
+  font-size: clamp(14px, 1.85cqw, 20px);
+  line-height: 1.4;
+  text-align: center;
 }
-.hdl-ps-select-arrow {
-  display: grid;
-  place-items: center;
-  width: 64px;
-  height: 64px;
-  margin-right: 12px;
-  border-radius: 16px;
-  background: #fff2ef;
-  color: var(--hdl-ps-red);
-}
-.hdl-ps-select-arrow svg {
-  width: 36px;
-  height: 36px;
+.hdl-ps-dialog .hdl-ps-skip {
+  display: block;
+  flex: none;
+  width: 100%;
+  min-height: clamp(64px, 10cqw, 108px);
+  margin: 0;
+  padding: 12px 20px;
+  border: 1px solid #cdbbb1;
+  border-radius: clamp(8px, 1.6cqw, 18px);
+  background: #faf7ef;
+  color: #b80020;
+  font-size: clamp(16px, 2.65cqw, 29px);
+  font-weight: 650;
+  line-height: 1.3;
+  text-align: center;
+  transition: background-color 160ms ease;
 }
 .hdl-ps-dialog .hdl-ps-product:not(:disabled):active {
-  border-color: var(--hdl-ps-red);
-  background: #fff3f1;
-  box-shadow: inset 0 0 0 1px var(--hdl-ps-red);
+  transform: scale(0.975);
+  filter: brightness(0.92);
 }
 @media (hover: hover) {
-  .hdl-ps-dialog .hdl-ps-product:not(:disabled):hover {
-    border-color: var(--hdl-ps-red);
-    background: #fffaf8;
+  .hdl-ps-product:not(:disabled):hover {
+    filter: brightness(0.97);
+  }
+  .hdl-ps-skip:not(:disabled):hover {
+    background: #f8eeee;
   }
 }
-.hdl-ps-unavailable {
-  margin-top: 12px;
-  color: var(--hdl-ps-muted);
-  font-size: 18px;
-  line-height: 1.5;
+.hdl-ps-dialog .hdl-ps-skip:not(:disabled):active {
+  filter: brightness(0.96);
 }
-.hdl-ps-dialog .hdl-ps-skip {
-  flex: none;
-  width: 100%;
-  margin-top: 24px;
+.hdl-ps-dialog button:focus-visible {
+  outline: 3px solid #b80020;
+  outline-offset: 4px;
 }
-.pisell-hdl-kiosk .hdl-ps-dialog button:disabled {
-  background: #ebe6e1;
-  color: #847b75;
+.hdl-ps-dialog button:disabled {
   cursor: not-allowed;
 }
-@keyframes hdl-ps-dialog-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.hdl-ps-dialog .hdl-ps-product:disabled {
+  filter: grayscale(0.65);
+}
+.hdl-ps-dialog .hdl-ps-skip:disabled {
+  color: #645b52;
+}
+.hdl-ps-empty {
+  margin: auto;
+  color: #645b52;
+  font-size: clamp(18px, 2.2cqw, 24px);
+  text-align: center;
+}
+.hdl-ps-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
 }
 @media (prefers-reduced-motion: reduce) {
-  .hdl-ps-dialog,
-  .hdl-ps-dialog * {
-    animation: none !important;
-    transition: none !important;
+  .hdl-ps-dialog button {
+    transition: none;
+  }
+  .hdl-ps-dialog .hdl-ps-product:not(:disabled):active {
+    transform: none;
   }
 }

package/lib/components/HDLKiosk/locales.js

@@ -3,6 +3,8 @@
 const localeTexts = {
 	en: {
 		"pisell2.hdl-kiosk.primary-select": "Choose your item",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "Build your bowl",
+		"pisell2.hdl-kiosk.primary-standard-zone": "Set meals",
 		"pisell2.hdl-kiosk.primary-select-description": "Tap an item to continue ordering",
 		"pisell2.hdl-kiosk.primary-select-close": "Close item selection",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "No product image",
@@ -254,6 +256,8 @@ const localeTexts = {
 	},
 	"zh-CN": {
 		"pisell2.hdl-kiosk.primary-select": "请选择商品",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "自选称重",
+		"pisell2.hdl-kiosk.primary-standard-zone": "套餐",
 		"pisell2.hdl-kiosk.primary-select-description": "点击商品，继续点单",
 		"pisell2.hdl-kiosk.primary-select-close": "关闭商品选择",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "暂无商品图片",
@@ -505,6 +509,8 @@ const localeTexts = {
 	},
 	"zh-HK": {
 		"pisell2.hdl-kiosk.primary-select": "請選擇商品",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "自選稱重",
+		"pisell2.hdl-kiosk.primary-standard-zone": "套餐",
 		"pisell2.hdl-kiosk.primary-select-description": "點擊商品，繼續點單",
 		"pisell2.hdl-kiosk.primary-select-close": "關閉商品選擇",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "暫無商品圖片",
@@ -756,6 +762,8 @@ const localeTexts = {
 	},
 	ja: {
 		"pisell2.hdl-kiosk.primary-select": "商品を選んでください",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "量り売り",
+		"pisell2.hdl-kiosk.primary-standard-zone": "セットメニュー",
 		"pisell2.hdl-kiosk.primary-select-description": "商品をタップして注文を続ける",
 		"pisell2.hdl-kiosk.primary-select-close": "商品選択を閉じる",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "商品画像がありません",
@@ -1007,6 +1015,8 @@ const localeTexts = {
 	},
 	pt: {
 		"pisell2.hdl-kiosk.primary-select": "Escolha o produto",
+		"pisell2.hdl-kiosk.primary-weighted-zone": "Escolha por peso",
+		"pisell2.hdl-kiosk.primary-standard-zone": "Menus de conjunto",
 		"pisell2.hdl-kiosk.primary-select-description": "Toque num produto para continuar o pedido",
 		"pisell2.hdl-kiosk.primary-select-close": "Fechar seleção de produto",
 		"pisell2.hdl-kiosk.primary-image-unavailable": "Sem imagem do produto",

package/lib/components/HDLKiosk/slices/customization/PrimaryProductSelection/assets/order-background.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1920" viewBox="0 0 1080 1920" fill="none">
+  <defs>
+    <pattern id="linen" width="12" height="12" patternUnits="userSpaceOnUse">
+      <path d="M0 3h12M0 9h12M3 0v12M9 0v12" stroke="#bba68c" stroke-width=".6" opacity=".07"/>
+      <path d="M0 4h12M0 10h12M4 0v12M10 0v12" stroke="#fffdf6" stroke-width=".6" opacity=".25"/>
+    </pattern>
+    <pattern id="cloth-edge" width="28" height="28" patternUnits="userSpaceOnUse">
+      <path d="m-7 7 28-28M0 28 28 0m-7 49 28-28" stroke="#9b4050" stroke-width="2" opacity=".06"/>
+    </pattern>
+  </defs>
+  <path fill="#eee8dc" d="M0 0h1080v1920H0z"/>
+  <path fill="url(#linen)" d="M0 0h1080v1920H0z"/>
+  <path fill="url(#cloth-edge)" d="M0 0h32v1920H0zm1048 0h32v1920h-32z"/>
+  <g stroke="#a88570" stroke-width="2" opacity=".2">
+    <ellipse cx="1080" cy="320" rx="184" ry="66"/>
+    <ellipse cx="1080" cy="320" rx="159" ry="47"/>
+    <path d="M900 332c29 117 84 164 180 164s151-47 180-164m-290 150h220"/>
+    <path d="m-32 730 143-320m-124 327L133 421" stroke-width="5" stroke-linecap="round"/>
+    <ellipse cx="-30" cy="1235" rx="170" ry="61"/>
+    <ellipse cx="-30" cy="1235" rx="146" ry="43"/>
+    <path d="M-196 1246c26 107 76 150 166 150s140-43 166-150"/>
+    <path d="m992 1530 128-296m-109 304 130-293" stroke-width="5" stroke-linecap="round"/>
+  </g>
+</svg>