fix(webcomponent): fix after rebase - error in resolving conflicts

Author: FranceBe

widgets-lit/README.md

@@ -18,7 +18,7 @@ Ultra-lightweight, zero-dependency widgets with complete CSS isolation, reactive
 | **♿ Accessibility** | WCAG 2.1 AA (partial) - Skip links + focus trap + arrow navigation; Home/End keys missing |
 | **📱 Responsive** | Desktop modal, mobile drawer, tablet layouts |
 | **🎨 Customizable** | Monochrome mode, custom card logos, suggested plans |
-| **📦 Lightweight** | ~31 KB gzipped (30% smaller than Preact version) |
+| **📦 Lightweight** | ~37 KB gzipped (20% smaller than Preact version) |
 | **🔄 Zero Config** | Drop-in CDN script; auto-detects merchant & API mode |
 
 ---
@@ -612,10 +612,10 @@ See [docs/I18N.md](docs/I18N.md) for adding custom translations or Crowdin integ
 
 | Format | Uncompressed | Gzipped |
 |--------|-------------|---------|
-| UMD | ~95 KB | ~27 KB |
-| ES Module | ~133 KB | ~35 KB |
+| UMD | ~148 KB | ~37 KB |
+| ES Module | ~203 KB | ~49 KB |
 
-Load time: Typically <1.5s via CDN (before API call).
+> Sizes from actual build output. Load time: Typically <2s via CDN (before API call).
 
 ### Session Caching
 
@@ -1189,7 +1189,7 @@ widgets.add(Alma.Widgets.PaymentPlans, {
 ```
 
 **Improvements you get:**
-- ✅ 70% smaller bundle
+- ✅ 20% smaller bundle (37 KB gzipped vs 46 KB)
 - ✅ No re-mount needed for property updates
 - ✅ CSS fully isolated (Shadow DOM)
 - ✅ Faster cache hits (75% fewer API calls)

widgets-lit/examples/playground.html

@@ -1029,6 +1029,9 @@ <h3 class="section-title"><span class="step-badge">7</span> Advanced</h3>
           ...(modalIntegration === 'manual' && { modalSelector: '#alma-modal alma-modal' }),
         })})`
 
+        // Assign generated JavaScript code to output element
+        document.getElementById('code-output-js').textContent = jsCode
+
         document.getElementById('code-output-config').textContent = JSON.stringify({
           merchantId, apiMode, purchaseAmount: amountCents, locale,
           ...(colorScheme !== 'orange' && { colorScheme }),

widgets-lit/src/components/styles/payment-plans.styles.ts

@@ -198,6 +198,50 @@ export const paymentPlansStyles = css`
     outline: 1px solid var(--alma-color-focus-outline-monochrome);
   }
 
+  /* Ineligible plans (disabled state) */
+  .plan-button.not-eligible {
+    cursor: not-allowed;
+    opacity: 0.5;
+    color: var(--text-secondary);
+    background-color: transparent;
+  }
+
+  .plan-button.not-eligible:hover {
+    transform: none;
+    background-color: transparent;
+  }
+
+  .plan-button.not-eligible:focus,
+  .plan-button.not-eligible:focus-visible {
+    outline: none;
+  }
+
+  /* Color scheme specific disabled styles */
+  :host([color-scheme='white']) .plan-button.not-eligible,
+  :host([color-scheme='light-gray']) .plan-button.not-eligible,
+  :host([color-scheme='gray']) .plan-button.not-eligible {
+    color: var(--gray-700);
+    opacity: 0.6;
+  }
+
+  :host([color-scheme='dark-gray']) .plan-button.not-eligible,
+  :host([color-scheme='black']) .plan-button.not-eligible {
+    color: var(--gray-600);
+    opacity: 0.5;
+  }
+
+  .plan-button.monochrome.not-eligible {
+    color: var(--gray-700);
+    opacity: 0.5;
+  }
+
+  /* Tabs style disabled */
+  .payment-plans.tabs .plan-button.not-eligible {
+    color: var(--text-secondary);
+    border-bottom-color: transparent;
+    opacity: 0.4;
+  }
+
   .info {
     font-family: var(--alma-payment-font-family-sans);
     font-size: var(--alma-payment-info-font-size, 10px);

widgets-lit/src/index.ts

@@ -345,6 +345,13 @@ class AlmaWidgets {
     panelMode?: boolean
     bottomSheet?: boolean
     planStyle?: 'buttons' | 'tabs'
+    plans?: Array<{
+      installmentsCount: number
+      deferredDays?: number
+      deferredMonths?: number
+      minAmount: number
+      maxAmount: number
+    }>
     cards?: Array<'cb' | 'amex' | 'mastercard' | 'visa'>
     customerBillingCountry?: string
     customerShippingCountry?: string