@liquidcommerce/elements-sdk 2.7.27 → 2.7.29

package/dist/types/modules/checkout/checkout.commands.d.ts

@@ -65,5 +65,6 @@ export declare class CheckoutCommands extends BaseCommand {
     private syncCheckoutState;
     private refreshCheckout;
     private dataForCheckoutPrepare;
+    private normalizeForApi;
     getDetails(): ICheckoutDetailsEventData;
 }

package/dist/types/modules/checkout/components/checkout-presale-countdown.component.d.ts

@@ -7,6 +7,7 @@ export declare class CheckoutPresaleCountdownComponent extends BaseComponent<nul
     private expiresAt;
     private initialDurationSeconds;
     private rootElement;
+    private lastRenderedTime;
     private scrollHandler;
     private scrollContainer;
     private isCurrentlyScrolled;

package/dist/types/modules/ui-components/lce-element/lce-element.component.d.ts

@@ -1,20 +1,12 @@
-import { type ComponentType } from '@/enums';
+import type { ComponentType } from '@/enums';
 import { SafeHTMLElement } from '@/utils/dom-compat';
 export declare class LceElementComponent extends SafeHTMLElement {
     private _initialized;
     protected _container: ShadowRoot | null;
     private _wrappedComponentRerender;
-    private _contentType;
-    private _appliedContrastVariables;
-    private _unregisterContrastGuard;
     constructor();
     initialize(contentType: ComponentType, contentElement: HTMLElement): void;
     rerender(context?: string): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private applyContrastCorrections;
-    private resolveSurfaceColor;
-    private measureHostSurfaceColor;
     private applyBasicStyles;
     private isCSSStyleSheetSupported;
     private applyThemeStyles;

package/dist/types/utils/format.d.ts

@@ -2,9 +2,14 @@ export declare function centToDollar(cent: number): number;
 export declare function formatCentToDollarText(cent: number, showZeroDecimals?: boolean): string;
 export declare function htmlStringToElement(htmlString: string): HTMLElement;
 export declare function formatISODateToMMDDYYYY(isoDateString: string | null | undefined): string;
+export declare function formatISOInstantToMMDDYYYY(isoInstant: string | null | undefined, timeZone?: string): string;
 export declare function capitalizeFirstLetter(text: string): string;
 export declare function splitCategoryPath(catPath?: string): {
     category: string;
     category2: string;
     category3: string;
 };
+export declare function normalizeEngravingLines(lines: readonly (string | null | undefined)[] | null | undefined): string[];
+export declare function normalizeText<T extends string | null | undefined>(value: T): T;
+export declare function normalizeEmail<T extends string | null | undefined>(value: T): T;
+export declare function normalizeCode<T extends string | null | undefined>(value: T): T;

package/dist/types/utils/timezone.d.ts

@@ -1,3 +1,9 @@
+export declare const BUSINESS_CONTRACT_TIMEZONE = "America/New_York";
+export declare function getDatePartsInTimezone(instant: Date, timeZone: string): {
+    year: string;
+    month: string;
+    day: string;
+} | null;
 export declare function detectUserTimezone(addressState?: string): string;
 export declare function getCurrentTimeInTimezone(timezone: string): Date;
 export declare function getCurrentTimeInUserTimezone(addressState?: string): Date;

package/docs/v1/api/configuration.md

@@ -86,9 +86,9 @@ interface IGlobalTheme {
 }
 ```
 
-> `inputBorderColor` and `focusRingColor` are optional. If you omit them — or supply a value that
-> fails contrast — the runtime contrast guard substitutes a compliant color. Set them explicitly to
-> keep those two details on-brand. See [Accessibility](../guides/accessibility.md).
+> `inputBorderColor` and `focusRingColor` are optional. Omit them to keep the WCAG-compliant
+> defaults, or set them explicitly to keep those two details on-brand — any value you supply is used
+> as given, so check its contrast. See [Accessibility](../guides/accessibility.md).
 
 | Property | Type | Description |
 |----------|------|-------------|

package/docs/v1/guides/accessibility.md

@@ -13,7 +13,7 @@ Accessibility is shared between the SDK and the host page:
 |---|---|
 | Roles, names and states of everything inside an element | Page structure: landmarks, heading order, `<html lang>` |
 | Keyboard operation of every control it renders | Contrast of your own content, and the surface you place elements on |
-| Focus movement into and out of its overlays | A theme whose colours are legible (the SDK corrects what it can, and logs when it does) |
+| Focus movement into and out of its overlays | A theme whose colours meet the WCAG contrast minimums (the SDK renders your colours as given) |
 | Announcing its own content changes | Not hiding or `inert`-ing the element container |
 | Reflow down to a 320px viewport | Layout around the element at 400% zoom |
 
@@ -57,7 +57,8 @@ retailer closes the panel — arrow keys move focus and `Enter` commits.
 A 2px ring in `--focus-ring-color`, offset 2px from the control. Controls that span their
 container's full width use an inset ring instead, because an outward ring on those is clipped by
 the scrolling panel around them. On primary-coloured fills the ring switches to
-`--selected-text-color`, which is guaranteed legible against that fill.
+`--selected-text-color`, the token already used for text on that fill — so setting the pair
+`primaryColor` / `selectedTextColor` to a combination that clears 3:1 covers the ring too.
 
 The ring targets `:focus` as well as `:focus-visible`, so browsers without `:focus-visible`
 support still show it.
@@ -118,26 +119,18 @@ on render, and a live region recreated with its text already in place is not ann
 Element colours come from your theme, and a brand palette chosen to look right often does not
 clear WCAG: white on a mid-tone brand fill is around 3:1, well under the 4.5:1 body text needs.
 
-The SDK therefore **measures your theme at runtime and corrects the foreground when it fails**:
+**The SDK renders the colours you supply exactly as given — it does not adjust them.** Contrast is
+therefore yours to get right: check each foreground token against the surface the Element sits on
+and make sure it reaches 4.5:1 for text (WCAG 1.4.3) and 3:1 for borders, icons and the focus ring
+(WCAG 1.4.11).
 
-1. The surface each element renders on is resolved — a themed token for overlays, otherwise the
-   real background behind the element, measured from your page.
-2. Each foreground token is checked against that surface: text, links, warning/error/success,
-   input borders and the focus ring, plus on-primary text against `primaryColor`.
-3. Failing tokens are shifted in lightness — same hue, same saturation, away from the background
-   — until they pass 4.5:1 (text) or 3:1 (borders, focus ring).
-4. Backgrounds, fills and brand colours are never changed. Compliant themes are untouched.
+The tokens worth checking are `defaultTextColor`, `linkTextColor`, `warningColor`, `errorColor` and
+`successColor` against `drawerBackgroundColor` (or whatever your page puts behind the Element), plus
+`selectedTextColor` against `primaryColor` for text on brand-filled buttons and badges.
 
-Corrections are applied as inline custom properties on the element host and logged:
-
-```
-Theme colour adjusted for accessibility: defaultTextColor was #FFFFFF (3.02:1 against #E7751E),
-which is below the required 4.5:1. Using #2B2B2B (4.69:1) instead. Set a compliant colour in
-your theme to control this yourself.
-```
-
-**To keep full control of your palette, supply colours that already pass.** Two tokens exist for
-exactly that and are worth setting explicitly:
+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:
 
 ```javascript
 customTheme: {
@@ -150,9 +143,6 @@ customTheme: {
 }
 ```
 
-The SDK cannot see through a background image: if an element sits on one, surface-relative
-corrections are skipped rather than guessed, and the contrast of that text is yours to get right.
-
 ### Zoom, reflow and text spacing
 
 Elements reflow down to a 320px CSS viewport (400% zoom on a 1280px screen) without horizontal
@@ -173,18 +163,11 @@ for (const region of document.querySelectorAll('[data-lce-live-region]')) {
 }
 ```
 
-**Contrast corrections** — inspect the element host:
-
-```javascript
-document.querySelector('lce-element[product]').getAttribute('style');
-// "--default-text-color: #2b2b2b; --focus-ring-color: #163ca7; …"
-```
-
 **Screen readers:** verify with VoiceOver (Safari/macOS), NVDA (Firefox/Windows) or TalkBack
 (Chrome/Android) — the pairings that matter most for a storefront.
 
 ## See Also
 
-- [Theming Guide](./theming.md) — the tokens the contrast guard reads
+- [Theming Guide](./theming.md) — the colour tokens to check for contrast
 - [Best Practices](./best-practices.md)
 - [Browser Support](../reference/browser-support.md)

package/docs/v1/guides/theming.md

@@ -29,8 +29,8 @@ const client = await Elements('YOUR_API_KEY', {
         successColor: '#28a745',
         drawerBackgroundColor: '#ffffff',
 
-        // Optional. Omit either one and the runtime contrast guard picks a
-        // WCAG-compliant value for you; set them to keep these details on-brand.
+        // Optional. Omit either one to keep the WCAG-compliant default;
+        // set them to keep these details on-brand.
         inputBorderColor: '#d4d4d8',
         focusRingColor: '#007bff'
       }

package/package.json

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

package/dist/types/modules/theme-provider/services/contrast-guard.service.d.ts

@@ -1,19 +0,0 @@
-import type { IGlobalTheme } from '@/interfaces/configs';
-import { type IRgbColor } from '@/utils/color-contrast';
-interface IGuardedHost {
-    apply: () => void;
-}
-export declare class ContrastGuardService {
-    private readonly logger;
-    private readonly hosts;
-    private readonly reported;
-    static getInstance(): ContrastGuardService;
-    register(host: IGuardedHost): () => void;
-    refreshAll(): void;
-    computeOverrides(theme: Partial<IGlobalTheme> | undefined, surface: IRgbColor | null): Record<string, string>;
-    private token;
-    private correctAgainstAll;
-    private correct;
-    private report;
-}
-export {};

package/dist/types/utils/color-contrast.d.ts

@@ -1,16 +0,0 @@
-export interface IRgbColor {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-}
-export declare const TEXT_CONTRAST_MIN = 4.5;
-export declare const NON_TEXT_CONTRAST_MIN = 3;
-export declare function parseColor(value: string | null | undefined): IRgbColor | null;
-export declare function toHexColor({ r, g, b }: IRgbColor): string;
-export declare function compositeOver(foreground: IRgbColor, background: IRgbColor): IRgbColor;
-export declare function relativeLuminance({ r, g, b }: IRgbColor): number;
-export declare function contrastRatio(foreground: IRgbColor, background: IRgbColor): number;
-export declare function meetsContrast(foreground: IRgbColor, background: IRgbColor, minRatio: number): boolean;
-export declare function ensureContrast(foreground: IRgbColor, background: IRgbColor, minRatio: number): IRgbColor;
-export declare function ensureContrastAgainstAll(foreground: IRgbColor, backgrounds: IRgbColor[], minRatio: number): IRgbColor;