@liquidcommerce/elements-sdk 2.6.7 → 2.7.0

package/docs/DOCUMENTATION_INDEX.md

@@ -39,7 +39,12 @@ Complete guide to the LiquidCommerce Elements SDK documentation.
 **Contents:**
 - Basic configuration
 - All configuration options with types
+- Hosted checkout configuration
 - Auto-initialization attributes
+- Product list configuration (filters, search, grid)
+- Mobile cart button attributes
+- Custom cart elements (toggle, items count)
+- Checkout-only build configuration
 - URL parameter configuration
 - TypeScript types
 - Configuration examples
@@ -59,6 +64,7 @@ Complete guide to the LiquidCommerce Elements SDK documentation.
 - Cart component theme
 - Checkout component theme
 - Address component theme
+- Product list component theme (card styles, display modes)
 - Dynamic theme updates (builder mode)
 - Theme presets (example configurations)
 - Best practices
@@ -72,7 +78,7 @@ Complete guide to the LiquidCommerce Elements SDK documentation.
 - Product actions
 - Address actions (Google Places & manual)
 - Cart actions (including programmatic addProduct)
-- Checkout actions (including programmatic addProduct)
+- Checkout actions (including programmatic addProduct, exitCheckout)
 - Action feedback events
 - Event handling best practices
 - Real-world business scenarios
@@ -238,6 +244,8 @@ docs/
 ### Features
 - [Product Engraving](../README.md#product-engraving)
 - [Product List](../README.md#product-list)
+- [Product List Search & Filters](../README.md#product-list-search)
+- [Hosted Checkout](../README.md#hosted-checkout-external-checkout-page)
 - [Gift Options](../README.md#gift-options)
 - [Promo Codes](../README.md#promo-codes)
 - [Gift Cards](../README.md#gift-cards)
@@ -301,9 +309,9 @@ Want to contribute an example?
 
 ---
 
-**Last updated:** October 2025  
-**SDK Version:** 2.x+  
-**Documentation Version:** 2.0
+**Last updated:** January 2026
+**SDK Version:** 2.6.x+
+**Documentation Version:** 2.1
 
 
 ---

package/docs/THEMING.md

@@ -180,6 +180,7 @@ interface IProductComponent {
   };
   layout: {
     showImages: boolean;
+    showOnlyMainImage: boolean;
     showTitle: boolean;
     showDescription: boolean;
     showQuantityCounter: boolean;
@@ -192,6 +193,8 @@ interface IProductComponent {
     addToCartButtonShowTotalPrice: boolean;
     buyNowButtonText: string;
     preSaleButtonText: string;
+    prioritizeEngraving: boolean;
+    noAvailabilityText: string;
   };
 }
 ```
@@ -205,6 +208,7 @@ customTheme: {
     },
     layout: {
       showImages: true,
+      showOnlyMainImage: false,
       showTitle: true,
       showDescription: true,
       showQuantityCounter: true,
@@ -216,7 +220,9 @@ customTheme: {
       addToCartButtonText: 'Add to Cart',
       addToCartButtonShowTotalPrice: true,
       buyNowButtonText: 'Buy Now',
-      preSaleButtonText: 'Pre-Order'
+      preSaleButtonText: 'Pre-Order',
+      prioritizeEngraving: false,
+      noAvailabilityText: 'Not available in your area'
     }
   }
 }
@@ -261,10 +267,6 @@ customTheme: {
 interface ICheckoutComponent {
   theme: {
     backgroundColor: string;
-    checkoutCompleted: {
-      customLogo: string;
-      customText: string | null;
-    };
   };
   layout: {
     emailOptIn: {
@@ -282,10 +284,15 @@ interface ICheckoutComponent {
       show: boolean;
       text: string;
     };
+    continueShoppingUrl: string;
     exitUrl: string;
     thankYouButtonText: string;
     drawerHeaderText: string;
     placeOrderButtonText: string;
+    checkoutCompleted: {
+      customLogo: string;
+      customText: string | null;
+    };
   };
 }
 ```
@@ -295,11 +302,7 @@ interface ICheckoutComponent {
 customTheme: {
   checkout: {
     theme: {
-      backgroundColor: '#ffffff',
-      checkoutCompleted: {
-        customLogo: 'https://yourdomain.com/logo.png',
-        customText: 'Thank you for your order!'
-      }
+      backgroundColor: '#ffffff'
     },
     layout: {
       emailOptIn: {
@@ -317,15 +320,26 @@ customTheme: {
         show: true,
         text: 'By placing this order, you agree to our terms and conditions.'
       },
+      continueShoppingUrl: '/',
       exitUrl: '/',
       thankYouButtonText: 'Continue Shopping',
       drawerHeaderText: 'Checkout',
-      placeOrderButtonText: 'Place Order'
+      placeOrderButtonText: 'Place Order',
+      checkoutCompleted: {
+        customLogo: 'https://yourdomain.com/logo.png',
+        customText: 'Thank you for your order!'
+      }
     }
   }
 }
 ```
 
+**Layout Properties:**
+
+- **`continueShoppingUrl`** (string): URL to redirect to when customer clicks "Continue Shopping" after order completion
+- **`exitUrl`** (string): URL for the exit/close action in checkout
+- **`legalMessage.text`** (string): Supports rich text / HTML content
+
 ## Address Component
 
 ```typescript
@@ -347,6 +361,77 @@ customTheme: {
 }
 ```
 
+## Product List Component
+
+```typescript
+interface IProductListComponent {
+  theme: {
+    backgroundColor: string;
+  };
+  layout: {
+    productCard: {
+      style: 'card' | 'ghost';
+      cornerRadius: 'rounded' | 'sharp';
+      showPrice: boolean;
+      showSizeSelector: boolean;
+      showFulfillment: boolean;
+      showRetailerName: boolean;
+      showQuantityCounter: boolean;
+      enableShippingFulfillment: boolean;
+      enableOnDemandFulfillment: boolean;
+      showCollections: boolean;
+      enablePersonalization: boolean;
+    };
+    displayMode: 'modal' | 'drawer';
+  };
+}
+```
+
+**Example:**
+```javascript
+customTheme: {
+  productList: {
+    theme: {
+      backgroundColor: '#f8f9fa'
+    },
+    layout: {
+      productCard: {
+        style: 'card',
+        cornerRadius: 'rounded',
+        showPrice: true,
+        showSizeSelector: true,
+        showFulfillment: true,
+        showRetailerName: false,
+        showQuantityCounter: true,
+        enableShippingFulfillment: true,
+        enableOnDemandFulfillment: true,
+        showCollections: false,
+        enablePersonalization: true
+      },
+      displayMode: 'drawer'
+    }
+  }
+}
+```
+
+**Card Style Options:**
+
+- **`style`**: `'card'` shows a bordered card with background, `'ghost'` shows a minimal borderless card
+- **`cornerRadius`**: `'rounded'` uses rounded corners, `'sharp'` uses square corners
+- **`displayMode`**: `'modal'` opens product details in a modal, `'drawer'` opens in a side drawer
+
+**Card Feature Flags:**
+
+- **`showPrice`**: Display price on the product card
+- **`showSizeSelector`**: Show size/variant selector on the card
+- **`showFulfillment`**: Show fulfillment type indicator
+- **`showRetailerName`**: Show the retailer name
+- **`showQuantityCounter`**: Show quantity increment/decrement controls
+- **`enableShippingFulfillment`**: Allow shipping fulfillment option
+- **`enableOnDemandFulfillment`**: Allow on-demand fulfillment option
+- **`showCollections`**: Show product collection/tag labels
+- **`enablePersonalization`**: Show personalization/engraving option on cards
+
 ## Complete Configuration Example
 
 ```javascript
@@ -390,6 +475,7 @@ const client = await Elements('YOUR_API_KEY', {
       },
       layout: {
         showImages: true,
+        showOnlyMainImage: false,
         showTitle: true,
         showDescription: true,
         showQuantityCounter: true,
@@ -401,7 +487,9 @@ const client = await Elements('YOUR_API_KEY', {
         addToCartButtonText: 'Add to Cart',
         addToCartButtonShowTotalPrice: true,
         buyNowButtonText: 'Buy Now',
-        preSaleButtonText: 'Pre-Order'
+        preSaleButtonText: 'Pre-Order',
+        prioritizeEngraving: false,
+        noAvailabilityText: 'Not available in your area'
       }
     },
     cart: {
@@ -417,11 +505,7 @@ const client = await Elements('YOUR_API_KEY', {
     },
     checkout: {
       theme: {
-        backgroundColor: '#ffffff',
-        checkoutCompleted: {
-          customLogo: 'https://yourdomain.com/logo.png',
-          customText: null
-        }
+        backgroundColor: '#ffffff'
       },
       layout: {
         emailOptIn: {
@@ -439,10 +523,15 @@ const client = await Elements('YOUR_API_KEY', {
           show: false,
           text: ''
         },
+        continueShoppingUrl: '/',
         exitUrl: '/',
         thankYouButtonText: 'Continue Shopping',
         drawerHeaderText: 'Checkout',
-        placeOrderButtonText: 'Place Order'
+        placeOrderButtonText: 'Place Order',
+        checkoutCompleted: {
+          customLogo: 'https://yourdomain.com/logo.png',
+          customText: null
+        }
       }
     },
     address: {

package/package.json

@@ -3,7 +3,7 @@
   "description": "LiquidCommerce Elements SDK",
   "license": "UNLICENSED",
   "author": "LiquidCommerce Team",
-  "version": "2.6.7",
+  "version": "2.7.0",
   "homepage": "https://docs.liquidcommerce.co/elements-sdk",
   "repository": {
     "type": "git",
@@ -13,21 +13,23 @@
     "url": "https://github.com/liquidcommerce/elements-sdk/issues"
   },
   "module": "./dist/index.esm.js",
-  "browser": "./umd/elements.js",
   "types": "./dist/types/index.d.ts",
   "packageManager": "pnpm@10.0.0",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.esm.js",
-      "browser": "./umd/elements.js",
       "default": "./dist/index.esm.js"
     },
+    "./checkout": {
+      "types": "./dist/types/index.checkout.d.ts",
+      "import": "./dist/index.checkout.esm.js",
+      "default": "./dist/index.checkout.esm.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
-    "umd",
     "docs",
     "README.md",
     "LICENSE"
@@ -39,21 +41,26 @@
   "type": "module",
   "sideEffects": [
     "dist/index.esm.js",
+    "dist/index.checkout.esm.js",
     "umd/elements.js",
+    "umd/elements-checkout.js",
     "src/index.ts",
-    "src/index.umd.ts"
+    "src/index.umd.ts",
+    "src/index.checkout.ts",
+    "src/index.checkout.umd.ts"
   ],
   "scripts": {
     "build": "rollup -c",
+    "build:checkout": "rollup -c rollup.config.checkout.mjs",
     "build:dev": "rollup -c --environment NODE_ENV:development",
     "dev": "rollup -c -w",
     "type-check": "tsc --noEmit",
     "lint": "pnpm biome lint --write",
     "format": "biome format --write",
     "check": "pnpm biome check --write .",
-    "fl": "pnpm check && pnpm build:dev",
+    "fl": "pnpm check && pnpm build && pnpm build:checkout",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "clean": "rm -rf dist umd node_modules && pnpm install && pnpm build",
+    "clean": "rm -rf dist umd node_modules && pnpm install && pnpm build && pnpm build:checkout",
     "prepublishOnly": "pnpm run build",
     "deprecate:old": "npm deprecate @liquidcommerceteam/elements-sdk@\"*\" \"Package moved to @liquidcommerce/elements-sdk\"",
     "prepare": "husky"
@@ -70,9 +77,9 @@
     "embeddable commerce"
   ],
   "devDependencies": {
-    "@biomejs/biome": "2.3.10",
-    "@commitlint/cli": "^20.2.0",
-    "@commitlint/config-conventional": "^20.2.0",
+    "@biomejs/biome": "2.3.12",
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
@@ -86,11 +93,11 @@
     "@semantic-release/npm": "^13.1.3",
     "@semantic-release/release-notes-generator": "^14.1.0",
     "@types/core-js": "^2.5.8",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.10",
     "conventional-changelog-cli": "^5.0.0",
     "husky": "^9.1.7",
     "process": "^0.11.10",
-    "rollup": "^4.54.0",
+    "rollup": "^4.56.0",
     "rollup-obfuscator": "^4.1.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "semantic-release": "^25.0.2",

package/dist/types/modules/product-list/components/product-list-card.component.d.ts

@@ -1,37 +0,0 @@
-import { BaseComponent } from '@/core/base-component.service';
-import type { IFulfillment, IProduct } from '@/interfaces/api/product.interface';
-import type { ProductListCardVariantType } from '@/interfaces/core.interface';
-export interface IProductListCardParams {
-    variant: ProductListCardVariantType;
-    fillCard: boolean;
-    product: IProduct;
-    shippingFulfillment: IFulfillment | null;
-    onDemandFulfillment: IFulfillment | null;
-    productUrl?: string;
-}
-export interface IProductAvailabilityData {
-    hasAvailability: boolean;
-    upc: string;
-    fulfillmentId: string;
-    partNumber: string;
-    quantity: number;
-    state: string;
-    isPresale: boolean;
-    isPresaleActive: boolean;
-}
-export interface IProductVariantParams {
-    image: string;
-    name: string;
-    size: string | null;
-    price: number;
-    availability: IProductAvailabilityData;
-}
-export declare class ProductListCardComponent extends BaseComponent<IProductListCardParams> {
-    get hostClasses(): string[];
-    private getAvailabilityData;
-    private isPresaleActive;
-    private handleAddToCart;
-    protected template(): HTMLElement[];
-    private generateProductUrl;
-    private createVariantStandard;
-}

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/index.d.ts

@@ -1,6 +0,0 @@
-export * from './product-list-apply-filter-button.component';
-export * from './product-list-checkbox-filter.components';
-export * from './product-list-delivery-options-filter.components';
-export * from './product-list-price-filter.components';
-export * from './product-list-search.component';
-export * from './product-list-toggle-filters.components';

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-apply-filter-button.component.d.ts

@@ -1 +0,0 @@
-export declare function createApplyFiltersButton(onCloseDrawer: VoidFunction): HTMLElement;

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-delivery-options-filter.components.d.ts

@@ -1,16 +0,0 @@
-export interface ICreateDeliveryOptionsFilterParams {
-    currentFilters?: {
-        deliveryOptions?: string;
-        personalized?: boolean;
-        preOrder?: boolean;
-    };
-    deliveryCollapsed: boolean;
-    isSameDayDeliveryDisabled: boolean;
-    onDeliveryOptionsChange?: (value: 'all' | 'shipping' | 'onDemand') => void;
-    onToggleCollapse: () => void;
-}
-export declare function createDeliveryOptionsFilter(params: ICreateDeliveryOptionsFilterParams): {
-    elements: HTMLElement[];
-    chevronContainer: HTMLElement;
-    deliveryOptionsList: HTMLElement;
-};

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-search.component.d.ts

@@ -1,16 +0,0 @@
-import { BaseComponent } from '@/core/base-component.service';
-export interface IProductListSearchParams {
-    searchTerm?: string;
-    handleInputChange?: (search: string) => void;
-    clearSearch?: VoidFunction;
-}
-export declare class ProductListSearchComponent extends BaseComponent<IProductListSearchParams> {
-    private searchInput?;
-    private clearButton?;
-    private readonly ALLOWED_CHARACTERS;
-    private readonly MAX_LENGTH;
-    get hostClasses(): string[];
-    protected template(): HTMLElement[];
-    private sanitizeInput;
-    private updateClearButtonVisibility;
-}

package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-toggle-filters.components.d.ts

@@ -1,18 +0,0 @@
-export interface ICreatePersonalizedFilterParams {
-    currentFilters?: {
-        personalized?: boolean;
-        deliveryOptions?: string;
-    };
-    isPersonalizationDisabled: boolean;
-    onPersonalizedChange?: (enabled: boolean) => void;
-}
-export interface ICreatePreOrderFilterParams {
-    currentFilters?: {
-        preOrder?: boolean;
-        deliveryOptions?: string;
-    };
-    isPreOrderDisabled: boolean;
-    onPreOrderChange?: (enabled: boolean) => void;
-}
-export declare function createPersonalizedFilter(params: ICreatePersonalizedFilterParams): HTMLElement[];
-export declare function createPreOrderFilter(params: ICreatePreOrderFilterParams): HTMLElement[];

package/dist/types/modules/theme-provider/styles/address/index.d.ts

@@ -1 +0,0 @@
-export * from './address.style';

package/dist/types/modules/theme-provider/styles/cart/index.d.ts

@@ -1 +0,0 @@
-export * from './cart.style';

package/dist/types/modules/theme-provider/styles/checkout/index.d.ts

@@ -1 +0,0 @@
-export * from './checkout.style';

package/dist/types/modules/theme-provider/styles/product/index.d.ts

@@ -1,3 +0,0 @@
-export * from './image-carousel.style';
-export * from './product.style';
-export * from './retailers.style';

package/dist/types/modules/theme-provider/styles/product-list/index.d.ts

@@ -1 +0,0 @@
-export * from './product-list.style';

package/dist/types/modules/theme-provider/styles/ui/index.d.ts

@@ -1,3 +0,0 @@
-export * from './drawer.style';
-export * from './loading.style';
-export * from './promo-code-ticker.style';

package/dist/types/modules/ui-components/input/birthdate-input.component.d.ts

@@ -1,53 +0,0 @@
-import { BaseComponent } from '@/core/base-component.service';
-export interface IBirthdateValidation {
-    required?: boolean;
-    minYear?: number;
-    maxYear?: number;
-    minAge?: number;
-    maxAge?: number;
-    customValidator?: (date: string) => string | null;
-}
-export interface IBirthdateInputComponentParams {
-    value?: string;
-    className?: string;
-    validation?: IBirthdateValidation;
-    onValidation?: (isValid: boolean, errors: string[]) => void;
-    onChange?: (value: string) => void;
-    label?: string;
-    name: string;
-    disabled?: boolean;
-}
-export declare class BirthdateInputComponent extends BaseComponent<IBirthdateInputComponentParams, null> {
-    get hostClasses(): string[];
-    private monthInput;
-    private dayInput;
-    private yearInput;
-    private errorContainer;
-    private validationTimeout;
-    afterRender(): void;
-    private populateInitialValue;
-    private setupEventListeners;
-    private formatMonth;
-    private formatDay;
-    private formatYear;
-    private padMonthOnBlur;
-    private padDayOnBlur;
-    private handleNavigation;
-    private handleChange;
-    private isFieldsComplete;
-    private scheduleValidation;
-    private getFormattedValue;
-    private validateDate;
-    private calculateAge;
-    private validateInput;
-    private showErrors;
-    private clearErrors;
-    getValue(): string;
-    setValue(value: string): void;
-    validate(): boolean;
-    focus(): void;
-    disable(): void;
-    enable(): void;
-    clear(): void;
-    protected template(): HTMLElement[];
-}