@liquidcommerce/elements-sdk 2.7.38 → 2.7.39

package/dist/ssr-stub.esm.js

@@ -214,6 +214,7 @@ const COMPONENT_TYPE = {
     CHECKOUT_ITEM: 'checkout-item',
     CHECKOUT_ITEM_QUANTITY: 'checkout-item-quantity',
     CHECKOUT_PLACE_ORDER_BUTTON: 'checkout-place-order-button',
+    CHECKOUT_PROP65_WARNING: 'checkout-prop65-warning',
     CHECKOUT_HEADER: 'checkout-header',
     CHECKOUT_PRESALE_COUNTDOWN: 'checkout-presale-countdown',
     CHECKOUT_PRESALE_EXPIRED: 'checkout-presale-expired',

package/dist/types/constants/index.d.ts

@@ -1 +1,2 @@
 export * from './core.constant';
+export * from './prop65.constant';

package/dist/types/constants/prop65.constant.d.ts

@@ -0,0 +1,8 @@
+export declare const PROP65: {
+    readonly LABEL: "CA WARNING";
+    readonly URL: "https://www.p65warnings.ca.gov/alcohol";
+    readonly URL_TEXT: "www.P65Warnings.ca.gov/alcohol";
+    readonly BODY_LEAD: "WARNING:";
+    readonly BODY: "Drinking distilled spirits, beer, coolers, wine and other alcoholic beverages may increase cancer risk, and, during pregnancy, can cause birth defects. For more information go to";
+};
+export declare function isProp65State(state: string | null | undefined): boolean;

package/dist/types/enums/core.enum.d.ts

@@ -133,6 +133,7 @@ export declare const COMPONENT_TYPE: {
     readonly CHECKOUT_ITEM: "checkout-item";
     readonly CHECKOUT_ITEM_QUANTITY: "checkout-item-quantity";
     readonly CHECKOUT_PLACE_ORDER_BUTTON: "checkout-place-order-button";
+    readonly CHECKOUT_PROP65_WARNING: "checkout-prop65-warning";
     readonly CHECKOUT_HEADER: "checkout-header";
     readonly CHECKOUT_PRESALE_COUNTDOWN: "checkout-presale-countdown";
     readonly CHECKOUT_PRESALE_EXPIRED: "checkout-presale-expired";

package/dist/types/modules/checkout/components/checkout-prop65-warning.component.d.ts

@@ -0,0 +1,8 @@
+import { BaseComponent } from '@/core/base-component.service';
+import type { ICheckoutComponent } from '@/interfaces/configs';
+export declare class CheckoutProp65WarningComponent extends BaseComponent<null, ICheckoutComponent> {
+    constructor();
+    get hostClasses(): string[];
+    private colorMode;
+    protected template(): HTMLElement;
+}

package/dist/types/modules/checkout/components/index.d.ts

@@ -18,6 +18,7 @@ export * from './checkout-place-order-button.component';
 export * from './checkout-presale-countdown.component';
 export * from './checkout-presale-expired.component';
 export * from './checkout-promo-code.component';
+export * from './checkout-prop65-warning.component';
 export * from './checkout-send-as-gift.component';
 export * from './checkout-stripe-form.component';
 export * from './checkout-stripe-handler.component';

package/dist/types/modules/product/components/product-prop65-warning.d.ts

@@ -0,0 +1 @@
+export declare function createProductProp65Warning(): HTMLDetailsElement;

package/dist/types/modules/product/product.component.d.ts

@@ -5,9 +5,12 @@ export interface IProductComponentParams {
 }
 export declare class ProductComponent extends BaseComponent<IProductComponentParams, IProductComponent> {
     private titleElement;
+    private contentElement;
+    private prop65Warning;
     constructor();
     private getProductId;
     onStoreWatch(changes: IOnStoreChanged[]): void;
+    private syncProp65Warning;
     protected template(): HTMLElement;
     disconnected(): Promise<void>;
 }

package/dist/types/modules/product/styles/prop65-warning.style.d.ts

@@ -0,0 +1 @@
+export declare const getProp65WarningStyles: () => string;

package/docs/v1/api/configuration.md

@@ -143,7 +143,7 @@ interface IGlobalLayout {
 | `enableOrderedProductSizes` | `boolean` | Enable a fixed display order for product/PLC size selectors (defined by `orderedProductSizes`) instead of the default ordering |
 | `orderedProductSizes` | `string[]` | Ordered list of size values controlling the sequence in which size selectors are rendered; changes trigger targeted rerenders of the affected size selectors |
 | `showPoweredBy` | `boolean` | Show "Powered by LiquidCommerce" badge |
-| `poweredByMode` | `'light' \| 'dark'` | Color mode for the powered-by badge |
+| `poweredByMode` | `'light' \| 'dark'` | Colour mode for the checkout: the powered-by badge, the Stripe payment form, and the California Proposition 65 warning panel |
 
 > **Note:** `showPoweredBy` is a server/plan-controlled setting and **cannot** be overridden by hosts. Any value supplied via `customTheme` (or a later config update) is stripped and the server value is restored. Only `poweredByMode` (`'light' \| 'dark'`) is host-overridable.
 

package/docs/v1/guides/accessibility.md

@@ -143,6 +143,11 @@ on render, and a live region recreated with its text already in place is not ann
   `option` and `radio` have presentational children, so the name is the only channel: a delivery
   option names the retailer, the price, the timing, the delivery fee and — for same-day — the
   store address and whether it is currently closed.
+- The California Proposition 65 warning on the product is a native `<details>` / `<summary>`
+  disclosure: the summary is a button that exposes its expanded state, and `Enter` / `Space` toggle
+  it with no scripting involved. Its `+` / `−` indicator is decorative and hidden. In checkout it is
+  a plain link whose accessible name ends "(opens in a new tab)", since following it leaves the
+  purchase mid-flow; the `·` separator is hidden.
 
 ### Headings
 
@@ -180,6 +185,12 @@ The tokens worth checking are `defaultTextColor`, `linkTextColor`, `warningColor
 `successColor` against `drawerBackgroundColor` (or whatever your page puts behind the Element), plus
 `selectedTextColor` against `primaryColor` for text on brand-filled buttons and badges.
 
+`defaultTextColor` also colours the product's California Proposition 65 warning, which is legally
+required copy, so it always uses the full-strength token, never a lighter variant — make sure it
+reaches 4.5:1 on your product background. The checkout's warning panel does not use it: it is a
+fixed colour pair chosen by `global.layout.poweredByMode` (over 13:1 in both `light` and `dark`), so
+set that to `dark` if your checkout is dark.
+
 Every token ships with a default that already passes on a light surface. Two are easy to forget
 because they are optional — leave them out to keep the compliant defaults, or set them explicitly to
 keep those details on-brand:

package/docs/v1/guides/checkout-component.md

@@ -452,6 +452,22 @@ window.addEventListener('lce:actions.checkout_product_add_failed', (event) => {
 });
 ```
 
+## California Proposition 65 Warning
+
+The order summary shows a panel directly above the place-order button reading **Adult signature
+(21+) required at delivery.** When the shipping address is in California, the panel adds
+**CA WARNING · California Proposition 65 information for these products**, so the warning is
+presented before the purchase completes. The text links to the OEHHA alcohol page,
+[www.P65Warnings.ca.gov/alcohol](https://www.p65warnings.ca.gov/alcohol), in a new tab. The full
+27 CCR § 25607.4 text is on the product element.
+
+The panel appears in the drawer checkout, the hosted checkout and the checkout-only build. The
+adult-signature notice is always shown; the Prop 65 line follows the shipping address's state and
+updates when the address changes. Neither can be turned off or reworded by configuration. Its colours follow `global.layout.poweredByMode` — the same
+light/dark switch the Stripe payment form uses — as a fixed pair so the copy is always legible:
+`light` is `#18181B` on `#F5F3EE`, `dark` is `#F5F3EE` on `#2A2824`. The font and corner radius come
+from your theme. If your checkout is dark, set `poweredByMode: 'dark'`.
+
 ## Customization
 
 ### Theme Configuration

package/docs/v1/guides/product-component.md

@@ -227,6 +227,22 @@ Adjust product quantity before adding to cart:
 - Direct input field
 - Inventory limits enforced
 
+### California Proposition 65 Warning
+
+When the shopper's address is in California, the product element ends with a collapsed
+**CA WARNING — California Proposition 65** row. Expanding it shows the alcoholic-beverage warning
+required by 27 CCR § 25607.4, verbatim, with a link to
+[www.P65Warnings.ca.gov/alcohol](https://www.p65warnings.ca.gov/alcohol). The row appears and
+disappears in place as the address changes; with no address set, or an address in another state, it
+is not rendered.
+
+This is a compliance requirement for alcohol sold online to California, so for a California address
+it cannot be turned off: there is no layout option, theme token or attribute that removes the row or
+changes its wording. It takes its
+colours, fonts and dividers from your theme (`defaultTextColor`, `accentColor`, the heading and
+paragraph fonts) so it fits your design — check that `defaultTextColor` reaches 4.5:1 against your
+product background, since the SDK renders it as given.
+
 ## Actions API
 
 Programmatically interact with products:

package/docs/v1/guides/theming.md

@@ -90,7 +90,7 @@ customTheme: {
       inputFieldStyle: 'outlined',  // or 'filled'
       enableOrderedProductSizes: true,  // enable custom ordering of the size selectors
       orderedProductSizes: ['750ml', '1L', '1.75L'],  // order applied to product and product-list size selectors
-      poweredByMode: 'light'  // or 'dark'  (note: showPoweredBy is controlled server-side and cannot be overridden via customTheme)
+      poweredByMode: 'light'  // or 'dark': badge, Stripe form and Prop 65 panel colours (note: showPoweredBy is controlled server-side and cannot be overridden via customTheme)
     }
   }
 }

package/package.json

@@ -3,7 +3,7 @@
   "description": "LiquidCommerce Elements SDK",
   "license": "UNLICENSED",
   "author": "LiquidCommerce Team",
-  "version": "2.7.38",
+  "version": "2.7.39",
   "homepage": "https://docs.liquidcommerce.co/elements-sdk",
   "repository": {
     "type": "git",