@primestyleai/tryon 5.10.118 → 5.10.121

package/dist/storefront/primestyle-tryon.js

@@ -11371,8 +11371,14 @@ const STYLES$1 = `
   .ps-tryon-sr-card-v2-value {
     font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);
     line-height: 1; letter-spacing: -0.02em;
+    overflow-wrap: anywhere;
   }
   .ps-tryon-sr-card-v2.ps-full .ps-tryon-sr-card-v2-value { font-size: 1.8vw; }
+  /* Long combined labels ("MISSY 12 / Standard", "PLUS 16W / Extra Length")
+     overflow the card at 2vw. Drop to ~1.3vw whenever the label is more
+     than ~12 chars so the whole thing fits on one line. */
+  .ps-tryon-sr-card-v2-value.ps-long  { font-size: 1.4vw; }
+  .ps-tryon-sr-card-v2.ps-full .ps-tryon-sr-card-v2-value.ps-long { font-size: 1.2vw; }
   .ps-tryon-sr-card-v2-value-suffix {
     font-size: 0.75vw; font-weight: 500; color: var(--ps-text-secondary);
     letter-spacing: 0; margin-left: 0.25vw; white-space: nowrap;
@@ -13419,11 +13425,20 @@ const STYLES$1 = `
   .ps-tryon-history-meta { font-size: 0.57vw; color: var(--ps-text-muted); margin-top: 3px; }
   .ps-tryon-history-sizing { display: flex; align-items: center; gap: 0.42vw; margin-top: 0.31vw; }
   .ps-tryon-history-sizing-reason { font-size: 0.57vw; color: var(--ps-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  /* History badge — auto-grows for long combined-variant labels
+     ("MISSY 12 / Standard"). Stays circular for short labels (S, M, L,
+     2-digit numerics) via min-width = min-height. Long labels stretch
+     into a rounded pill. */
   .ps-tryon-history-size-badge {
-    flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    min-width: 2.08vw; height: 2.08vw;
+    padding: 0 0.6vw;
+    border-radius: 999px;
+    display: inline-flex; align-items: center; justify-content: center;
     background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-light));
     color: #fff; font-size: 0.68vw; font-weight: 700;
+    white-space: nowrap; line-height: 1;
+    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
   }
   .ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; border: 2px solid var(--ps-accent); }
   .ps-tryon-history-delete {
@@ -20276,7 +20291,7 @@ function SectionDetailView({
           }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-card-size", children: [
               displaySizeLabel,
-              !selectedCountry && finalDisplayLength ? ` / ${finalDisplayLength}` : ""
+              !selectedCountry && finalDisplayLength && !displaySizeLabel.includes(" / ") ? ` / ${finalDisplayLength}` : ""
             ] }),
             finalDisplayLength && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength }),
             selectedCountry && isRecommended && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-card-size-meta", style: { fontSize: "11px", opacity: 0.7 }, children: [
@@ -20514,8 +20529,11 @@ function SectionDetailView({
           borderRadius: "0.5vw",
           padding: "0.2vw 0.7vw"
         }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "3.5vw", fontWeight: 300, color: "var(--ps-text-primary)", lineHeight: 1, letterSpacing: "-0.02em" }, children: displaySizeLabel }),
-          finalDisplayLength && (() => {
+          (() => {
+            const isLong = (displaySizeLabel || "").length > 12;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: isLong ? "1.6vw" : "3.5vw", fontWeight: 300, color: "var(--ps-text-primary)", lineHeight: 1, letterSpacing: "-0.02em" }, children: displaySizeLabel });
+          })(),
+          finalDisplayLength && !displaySizeLabel.includes(" / ") && (() => {
             const isNumericLen = /^\d+(\.\d+)?$/.test(String(finalDisplayLength).trim());
             const sectionNameLower = (sectionName || "").toLowerCase();
             const lengthLabel = isNumericLen ? /pant|trouser|inseam/.test(sectionNameLower) ? t2("Inseam") : t2("Length") : null;
@@ -21551,7 +21569,11 @@ function SizeResultView({
                       type: "button",
                       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-card-v2-text", children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-card-v2-label", children: sectionName }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-card-v2-value", children: pendingCustomSizes[sectionName]?.displayLabel || singleResult.recommendedSize || "—" }),
+                        (() => {
+                          const labelText = pendingCustomSizes[sectionName]?.displayLabel || singleResult.recommendedSize || "—";
+                          const isLong = labelText.length > 12;
+                          return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `ps-tryon-sr-card-v2-value${isLong ? " ps-long" : ""}`, children: labelText });
+                        })(),
                         /* @__PURE__ */ jsxRuntimeExports.jsx(
                           "span",
                           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.10.118",
+  "version": "5.10.121",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",