feat: add alert appearance mode and new demo presets (#1)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: jkrenge

dev/index.html

@@ -74,6 +74,20 @@ <h2 class="text-base font-semibold">Configuration</h2>
                 >
                   Shirt
                 </button>
+                <button
+                  class="text-xs font-semibold px-3 h-8 rounded-lg border border-navy-200 bg-navy-50 text-navy-500 hover:bg-navy-100 transition-colors cursor-pointer"
+                  data-sample="pants-large"
+                  type="button"
+                >
+                  Pants (large)
+                </button>
+                <button
+                  class="text-xs font-semibold px-3 h-8 rounded-lg border border-navy-200 bg-navy-50 text-navy-500 hover:bg-navy-100 transition-colors cursor-pointer"
+                  data-sample="pants-small"
+                  type="button"
+                >
+                  Pants (small)
+                </button>
               </div>
             </div>
 
@@ -119,6 +133,7 @@ <h2 class="text-base font-semibold">Configuration</h2>
               >
                 <option value="neutral">Neutral</option>
                 <option value="colored">Colored</option>
+                <option value="alert">Alert</option>
               </select>
             </label>
 

dev/main.js

@@ -7,6 +7,14 @@ const SAMPLE_REQUESTS = {
     productId: '6792154579016',
     accountId: '1619013',
   },
+  'pants-large': {
+    productId: "Men's Pro 3L 3.0 Pants",
+    accountId: '1617954',
+  },
+  'pants-small': {
+    productId: "Men's Iver 5-Pocket Pants",
+    accountId: '1617954',
+  },
 };
 
 const DEFAULT_SAMPLE = SAMPLE_REQUESTS.pants;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcellab/selection-guide-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Embeddable size recommendation widget for retailer product detail pages. Displays fit guidance, confidence scores, and customer feedback summaries powered by the parcelLab Size Recommender API.",
   "type": "module",
   "license": "MIT",

src/config.ts

@@ -40,7 +40,11 @@ function parseAccountId(accountId: WidgetConfig['accountId']): number {
 function parseAppearance(
   appearance: WidgetConfig['appearance'],
 ): AppearanceMode {
-  return appearance === 'colored' ? 'colored' : 'neutral';
+  if (appearance === 'colored' || appearance === 'alert') {
+    return appearance;
+  }
+
+  return 'neutral';
 }
 
 function parseDensity(density: WidgetConfig['density']): DensityMode {
@@ -134,7 +138,7 @@ export function readConfigFromElement(
     config.apiBaseUrl = dataset.apiBaseUrl;
   }
 
-  if (dataset.appearance === 'colored' || dataset.appearance === 'neutral') {
+  if (dataset.appearance === 'colored' || dataset.appearance === 'neutral' || dataset.appearance === 'alert') {
     config.appearance = dataset.appearance;
   }
 

src/render.ts

@@ -105,6 +105,42 @@ const STYLES = `
   }
 
   .${ROOT_CLASS}--colored.${ROOT_CLASS}--fit-large {
+    --plsr-accent: #4f7de2;
+    --plsr-badge-background: #edf3ff;
+    --plsr-badge-text: #37568a;
+    --plsr-track-start: #e9ebef;
+    --plsr-track: #e9ebef;
+    --plsr-track-end: #dce8ff;
+  }
+
+  .${ROOT_CLASS}--colored.${ROOT_CLASS}--fit-unknown {
+    --plsr-accent: #6b6b6b;
+    --plsr-badge-background: #efefef;
+    --plsr-badge-text: #333333;
+    --plsr-track-start: #e3e3e3;
+    --plsr-track: #e3e3e3;
+    --plsr-track-end: #e3e3e3;
+  }
+
+  .${ROOT_CLASS}--alert.${ROOT_CLASS}--fit-small {
+    --plsr-accent: #cf6868;
+    --plsr-badge-background: #fdf0f0;
+    --plsr-badge-text: #7a4040;
+    --plsr-track-start: #f8dddd;
+    --plsr-track: #f0e6e6;
+    --plsr-track-end: #ececec;
+  }
+
+  .${ROOT_CLASS}--alert.${ROOT_CLASS}--fit-true {
+    --plsr-accent: #4c8b61;
+    --plsr-badge-background: #edf7ef;
+    --plsr-badge-text: #315743;
+    --plsr-track-start: #e7ece8;
+    --plsr-track: #dde6de;
+    --plsr-track-end: #e7ece8;
+  }
+
+  .${ROOT_CLASS}--alert.${ROOT_CLASS}--fit-large {
     --plsr-accent: #cf6868;
     --plsr-badge-background: #fdf0f0;
     --plsr-badge-text: #7a4040;
@@ -113,7 +149,7 @@ const STYLES = `
     --plsr-track-end: #f8dddd;
   }
 
-  .${ROOT_CLASS}--colored.${ROOT_CLASS}--fit-unknown {
+  .${ROOT_CLASS}--alert.${ROOT_CLASS}--fit-unknown {
     --plsr-accent: #6b6b6b;
     --plsr-badge-background: #efefef;
     --plsr-badge-text: #333333;
@@ -191,7 +227,8 @@ const STYLES = `
     position: relative;
   }
 
-  .${ROOT_CLASS}--colored .${ROOT_CLASS}__track {
+  .${ROOT_CLASS}--colored .${ROOT_CLASS}__track,
+  .${ROOT_CLASS}--alert .${ROOT_CLASS}__track {
     background: linear-gradient(
       90deg,
       var(--plsr-track-start) 0%,

src/types.ts

@@ -4,7 +4,7 @@ export type NotFoundMode = 'empty' | 'true-to-size';
 
 export type FitCategory = 'small' | 'true' | 'large' | 'unknown';
 
-export type AppearanceMode = 'neutral' | 'colored';
+export type AppearanceMode = 'neutral' | 'colored' | 'alert';
 
 export type DensityMode = 'compact' | 'comfortable';