@athoscommerce/snap-preact 1.11.0 → 1.12.0

package/dist/esm/components/src/components/Molecules/ProductDetailTable/ProductDetailTable.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { isObservableArray } from 'mobx';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useCustomComponentOverride } from '../../../hooks';
+import { ProductDetail } from '../../Atoms/ProductDetail';
+import { getProductFieldValue, renderDetailValue } from '../../Atoms/ProductDetail/ProductDetail';
+import { Price } from '../../Atoms/Price';
+import { Image } from '../../Atoms/Image';
+import { Rating } from '../Rating';
+const defaultStyles = () => {
+    return css({
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: '0.9em',
+        '& tr': {
+            borderBottom: '1px solid #eee',
+        },
+        '& tr:last-of-type': {
+            borderBottom: 'none',
+        },
+        '& th, & td': {
+            padding: '10px 0',
+            textAlign: 'left',
+            verticalAlign: 'top',
+        },
+        '& th': {
+            width: '40%',
+            paddingRight: '16px',
+            fontWeight: 500,
+            color: '#666',
+            textTransform: 'uppercase',
+            fontSize: '0.85em',
+            letterSpacing: '0.02em',
+        },
+        '& td': {
+            color: '#1a1a1a',
+            // Typed values render components whose defaults center them (Rating flex-centers its
+            // stars, Image stretches and letterboxes via objectFit) — left-align both so every
+            // display type lines up with the plain text values.
+            '& .ss__rating': {
+                justifyContent: 'flex-start',
+            },
+            '& .ss__image': {
+                alignItems: 'flex-start',
+                // Cap images at a row-scale thumbnail (width stays auto, preserving aspect ratio)
+                // so a full-size product image can't dwarf the table.
+                '& img': {
+                    maxHeight: '100px',
+                },
+            },
+        },
+    });
+};
+export const ProductDetailTable = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('productDetailTable', globalTheme, defaultProps, properties);
+    const { result, displayFields, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('productDetailTable', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    // Render only the configured fields that resolve to a non-empty value (preserves the opt-in
+    // behaviour: with no displayFields, nothing renders).
+    const displayedFields = (displayFields || []).filter((detail) => renderDetailValue(getProductFieldValue(result, detail.field)) !== '');
+    if (displayedFields.length === 0)
+        return null;
+    const renderValue = (detail) => {
+        const rawValue = getProductFieldValue(result, detail.field);
+        const componentProps = { theme: props.theme, treePath, ...defined({ disableStyles }) };
+        switch (detail.type) {
+            case 'price': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return _jsx(Price, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'rating': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return _jsx(Rating, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'image': {
+                // An image field may resolve to an array of URLs — display the first.
+                const src = Array.isArray(rawValue) || isObservableArray(rawValue) ? Array.from(rawValue)[0] : rawValue;
+                if (typeof src === 'string' && src) {
+                    return _jsx(Image, { src: src, alt: detail.label || detail.field, ...componentProps });
+                }
+                break;
+            }
+            case 'html':
+                return _jsx(ProductDetail, { result: result, field: detail.field, html: true, ...componentProps });
+        }
+        // 'text' (the default) — and the fallback when a typed value doesn't fit its type.
+        return _jsx(ProductDetail, { result: result, field: detail.field, ...componentProps });
+    };
+    return (_jsx(CacheProvider, { children: _jsx("table", { ...styling, className: classnames('ss__product-detail-table', className, internalClassName), children: _jsx("tbody", { children: displayedFields.map((detail, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: detail.label ?? detail.field }), _jsx("td", { children: renderValue(detail) })] }, `${detail.field}-${index}`))) }) }) }));
+});

package/dist/esm/components/src/components/Molecules/ProductDetailTable/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProductDetailTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/ProductDetailTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ProductDetailTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/esm/components/src/components/Molecules/ProductDetailTable/index.js

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

package/dist/esm/components/src/components/Molecules/QuantityPicker/QuantityPicker.d.ts

@@ -0,0 +1,43 @@
+import { h } from 'preact';
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const QuantityPicker: ((properties: QuantityPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+type QuantityPickerChangeEvent = React.MouseEvent<HTMLElement, MouseEvent> | React.FocusEvent<HTMLInputElement>;
+export type QuantityPickerProps = {
+    lang?: Partial<QuantityPickerLang>;
+    value?: number;
+    startValue?: number;
+} & QuantityPickerTemplatesLegalProps & ComponentProps<QuantityPickerProps>;
+export type QuantityPickerTemplatesLegalProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    hideButtons?: boolean;
+    label?: string;
+    onChange?: (e: QuantityPickerChangeEvent, value: number) => void;
+};
+export interface QuantityPickerLang {
+    quantityInput: Lang<{
+        quantity: number;
+        min: number;
+        max?: number;
+        disabled?: boolean;
+    }>;
+    decrementButton: Lang<{
+        quantity: number;
+        min: number;
+        max?: number;
+        disabled?: boolean;
+    }>;
+    incrementButton: Lang<{
+        quantity: number;
+        min: number;
+        max?: number;
+        disabled?: boolean;
+    }>;
+}
+export {};
+//# sourceMappingURL=QuantityPicker.d.ts.map

package/dist/esm/components/src/components/Molecules/QuantityPicker/QuantityPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityPicker.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/QuantityPicker/QuantityPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AA6B3E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAwLrE,CAAC;AAMH,KAAK,yBAAyB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;AAEhH,MAAM,MAAM,mBAAmB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,yBAAyB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,aAAa,EAAE,IAAI,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC,CAAC;IACH,eAAe,EAAE,IAAI,CAAC;QACrB,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC,CAAC;IACH,eAAe,EAAE,IAAI,CAAC;QACrB,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/QuantityPicker/QuantityPicker.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
+import { Button } from '../../Atoms/Button';
+const defaultStyles = () => {
+    return css({
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '5px',
+        '&.ss__quantity-picker--disabled': {
+            opacity: 0.7,
+        },
+        '& .ss__quantity-picker__label-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+        },
+        '& .ss__quantity-picker__controls-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '5px',
+        },
+        '& .ss__quantity-picker__input': {
+            width: '60px',
+            textAlign: 'center',
+            padding: '5px',
+            boxSizing: 'border-box',
+        },
+    });
+};
+export const QuantityPicker = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        min: 1,
+        step: 1,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('quantityPicker', globalTheme, defaultProps, properties);
+    const { value, startValue, min, max, step, disabled, hideButtons, label, onChange, disableStyles, className, internalClassName, theme: ______, treePath, lang, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
+    // whole numbers only, never negative, within min/max
+    const minimum = Math.max(0, Math.trunc(min));
+    const clamp = (num) => {
+        let clamped = Math.trunc(num);
+        if (isNaN(clamped)) {
+            clamped = minimum;
+        }
+        clamped = Math.max(minimum, clamped);
+        if (typeof max == 'number') {
+            clamped = Math.min(Math.trunc(max), clamped);
+        }
+        return clamped;
+    };
+    // useState is called unconditionally (rules of hooks): a `value` prop that transitions between
+    // undefined and defined across renders must not shift hook order. In controlled mode the
+    // internal state is simply ignored and the quantity derives from the prop.
+    const [internalQuantity, setQuantityState] = useState(clamp(startValue ?? minimum));
+    const stateful = value === undefined;
+    const quantity = stateful ? internalQuantity : clamp(value);
+    // raw input text while typing - committed (clamped) on blur
+    const [editingValue, setEditingValue] = useState(undefined);
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('quantityPicker', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const commit = (e, newValue) => {
+        if (disabled) {
+            return;
+        }
+        const clamped = clamp(newValue);
+        if (stateful) {
+            setQuantityState(clamped);
+        }
+        if (clamped !== quantity) {
+            onChange && onChange(e, clamped);
+        }
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        quantityInput: {
+            attributes: {
+                'aria-label': 'quantity',
+            },
+        },
+        decrementButton: {
+            attributes: {
+                'aria-label': 'decrease quantity',
+            },
+        },
+        incrementButton: {
+            attributes: {
+                'aria-label': 'increase quantity',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const _lang = deepmerge(defaultLang, lang || {});
+    const mergedLang = useLang(_lang, {
+        quantity,
+        min: minimum,
+        max,
+        disabled,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const subProps = {
+        button: {
+            // default props
+            internalClassName: 'ss__quantity-picker__button',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__quantity-picker', { 'ss__quantity-picker--disabled': disabled }, className, internalClassName), ...additionalProps, children: [label && (_jsx("div", { className: "ss__quantity-picker__label-wrapper", children: _jsx("span", { className: "ss__quantity-picker__label", children: label }) })), _jsxs("div", { className: "ss__quantity-picker__controls-wrapper", children: [!hideButtons && (_jsx(Button, { ...subProps.button, name: "decrement", internalClassName: classnames(subProps.button.internalClassName, 'ss__quantity-picker__button--decrement'), disabled: disabled || quantity <= minimum, onClick: (e) => commit(e, quantity - step), icon: 'minus-thin', ...mergedLang.decrementButton?.attributes })), _jsx("input", { className: "ss__quantity-picker__input", type: "number", inputMode: "numeric", min: minimum, max: max, step: step, value: editingValue ?? quantity, disabled: disabled, onInput: (e) => setEditingValue(e.target.value), onBlur: (e) => {
+                                if (editingValue !== undefined) {
+                                    const parsed = parseFloat(editingValue);
+                                    commit(e, isNaN(parsed) ? quantity : parsed);
+                                    setEditingValue(undefined);
+                                }
+                            }, ...mergedLang.quantityInput?.all }), !hideButtons && (_jsx(Button, { ...subProps.button, name: "increment", internalClassName: classnames(subProps.button.internalClassName, 'ss__quantity-picker__button--increment'), disabled: disabled || (typeof max == 'number' && quantity >= max), onClick: (e) => commit(e, quantity + step), icon: 'plus-thin', ...mergedLang.incrementButton?.attributes }))] })] }) }));
+});

package/dist/esm/components/src/components/Molecules/QuantityPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './QuantityPicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/QuantityPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/QuantityPicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/esm/components/src/components/Molecules/QuantityPicker/index.js

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

package/dist/esm/components/src/components/Molecules/Result/Result.d.ts

@@ -25,8 +25,10 @@ export type ResultTemplatesLegalProps = {
     hideRating?: boolean;
     hideVariantSelections?: boolean;
     hideAddToCartButton?: boolean;
+    hideQuickviewButton?: boolean;
     addToCartButtonText?: string;
     onAddToCartClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, result: Product) => void;
+    onQuickviewClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, result: Product) => void;
     addToCartButtonSuccessText?: string;
     addToCartButtonSuccessTimeout?: number;
     detailSlot?: JSX.Element | JSX.Element[];
@@ -38,6 +40,7 @@ export type ResultTemplatesLegalProps = {
 export interface ResultLang {
     addToCartButtonText: Lang<ResultPropData>;
     addToCartButtonSuccessText: Lang<ResultPropData>;
+    quickviewButtonText: Lang<ResultPropData>;
 }
 interface ResultPropData {
     result: Product;

package/dist/esm/components/src/components/Molecules/Result/Result.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAUpD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAG5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAI9D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAwD3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAwQrD,CAAC;AAWH,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1C,0BAA0B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cAAc;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAUpD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAG5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAI9D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAkE3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA0SrD,CAAC;AAYH,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;IACpD,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1C,0BAA0B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACjD,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,UAAU,cAAc;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC"}

package/dist/esm/components/src/components/Molecules/Result/Result.js

@@ -45,6 +45,16 @@ const defaultStyles = () => {
                 background: 'rgba(255, 255, 255, 0.5)',
                 padding: '10px',
             },
+            '& .ss__result__quickview': {
+                position: 'absolute',
+                bottom: '10px',
+                right: '10px',
+                display: 'flex',
+                background: 'transparent',
+                border: 0,
+                padding: '5px',
+                cursor: 'pointer',
+            },
         },
         '& .ss__result__details': {
             padding: '10px',
@@ -75,9 +85,10 @@ export const Result = observer((properties) => {
         addToCartButtonSuccessTimeout: 2000,
         hideAddToCartButton: true,
         hideRating: true,
+        hideQuickviewButton: true,
     };
     const props = mergeProps('result', globalTheme, defaultProps, properties);
-    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, } = props;
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, hideQuickviewButton, onQuickviewClick, trackingRef, treePath, } = props;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('result', {
         ...props,
         customComponent: props.customComponent && props.customComponent !== 'Result' ? props.customComponent : undefined,
@@ -160,6 +171,29 @@ export const Result = observer((properties) => {
             theme: props.theme,
             treePath,
         },
+        quickviewButton: {
+            // default props
+            name: 'quickview',
+            internalClassName: 'ss__result__quickview',
+            icon: {
+                internalClassName: 'ss__result__quickview__icon',
+                icon: 'eye',
+                size: '20px',
+            },
+            onClick: (e) => {
+                if (onQuickviewClick) {
+                    onQuickviewClick(e, result);
+                }
+                controller?.quickview(result);
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
         button: {
             // default props
             internalClassName: 'ss__result__button--addToCart',
@@ -190,6 +224,11 @@ export const Result = observer((properties) => {
         addToCartButtonText: {
             value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
         },
+        quickviewButtonText: {
+            attributes: {
+                'aria-label': 'Quick View',
+            },
+        },
     };
     //deep merge with props.lang
     const lang = deepmerge(defaultLang, props.lang || {});
@@ -199,9 +238,9 @@ export const Result = observer((properties) => {
     }, { activeBreakpoint: globalTheme?.activeBreakpoint });
     const isOnSale = Boolean(core?.msrp && core?.price && core?.price < core?.msrp);
     const renderPrices = controller?.store?.config?.asyncState?.product?.price ? result.state.priceFetched : true;
-    return core ? (_jsx(CacheProvider, { children: _jsxs("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && (_jsx("div", { className: "ss__result__image-wrapper", children: _jsx("a", { href: core.url, onClick: (e) => {
-                            onClick && onClick(e);
-                        }, children: !hideBadge ? (_jsx(OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: _jsx(Image, { ...subProps.image }) })) : (_jsx(Image, { ...subProps.image })) }) })), _jsxs("div", { className: "ss__result__details", children: [!hideBadge && (_jsx(CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && (_jsx("div", { className: "ss__result__details__title", children: _jsx("a", { href: core.url, onClick: (e) => {
+    return core ? (_jsx(CacheProvider, { children: _jsxs("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && (_jsxs("div", { className: "ss__result__image-wrapper", children: [_jsx("a", { href: core.url, onClick: (e) => {
+                                onClick && onClick(e);
+                            }, children: !hideBadge ? (_jsx(OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: _jsx(Image, { ...subProps.image }) })) : (_jsx(Image, { ...subProps.image })) }), !hideQuickviewButton && controller?.quickviewManager && (_jsx(Button, { ...subProps.quickviewButton, ...mergedLang.quickviewButtonText.attributes }))] })), _jsxs("div", { className: "ss__result__details", children: [!hideBadge && (_jsx(CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && (_jsx("div", { className: "ss__result__details__title", children: _jsx("a", { href: core.url, onClick: (e) => {
                                     onClick && onClick(e);
                                 }, dangerouslySetInnerHTML: {
                                     __html: displayName || '',

package/dist/esm/components/src/components/Molecules/Slideout/Slideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA+HzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAkIzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

package/dist/esm/components/src/components/Molecules/Slideout/Slideout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useLayoutEffect } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
@@ -86,8 +86,11 @@ export const Slideout = observer((properties) => {
         document.body.style.overflow = newActive ? 'hidden' : '';
         onChange && onChange(newActive);
     };
-    //this is used to update active state if active prop is changed from parent component.
-    useEffect(() => {
+    // Sync internal state when the active prop changes from the parent component. This is a
+    // layout effect so the content commit is scheduled before consumers' passive effects run —
+    // a plain effect would mount the content one tick later, after a parent that opened the
+    // slideout has already tried (and failed) to move focus into it.
+    useLayoutEffect(() => {
         setRenderContent(Boolean(active));
         setActive(Boolean(active));
     }, [active]);

package/dist/esm/components/src/components/Molecules/Slideshow/Slideshow.d.ts

@@ -58,6 +58,7 @@ export type SlideshowTemplatesLegalProps = {
     slidesToShow?: number;
     slideWidth?: number;
     slidesToMove?: number;
+    startIndex?: number;
     gap?: number;
     slideImageAlt?: string;
     ariaLabel?: string;

package/dist/esm/components/src/components/Molecules/Slideshow/Slideshow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA4JxD,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAgqB3D,CAAC;AAEH,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA+JxD,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAisB3D,CAAC;AAEH,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/esm/components/src/components/Molecules/Slideshow/Slideshow.js

@@ -9,6 +9,8 @@ import { Image } from '../../Atoms/Image';
 import { Button } from '../../Atoms/Button';
 import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from 'deepmerge';
+// Pointer travel (px) past which a press is treated as a drag rather than a click.
+const DRAG_CLICK_THRESHOLD = 5;
 const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayNavigation = false, showNavigation }) => {
     return css({
         position: 'relative',
@@ -155,13 +157,14 @@ export const Slideshow = observer((properties) => {
         centerInsufficientSlides: true,
         slidesToShow: properties.slideWidth ? undefined : 4,
         slidesToMove: 1,
+        startIndex: 0,
         gap: 10,
         ariaLabel: 'slideshow',
         touchDragging: true,
         dragThreshold: 50,
     };
     const props = mergeProps('slideshow', globalTheme, defaultProps, properties);
-    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, gap, treePath, overlayNavigation, dragThreshold, } = props;
+    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, startIndex, gap, treePath, overlayNavigation, dragThreshold, } = props;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('slideshow', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -236,12 +239,17 @@ export const Slideshow = observer((properties) => {
     if (!slidesToMove) {
         slidesToMove = 1;
     }
-    const [currentIndex, setCurrentIndex] = useState(0);
+    const [currentIndex, setCurrentIndex] = useState(startIndex ?? 0);
     const [isPlaying, setIsPlaying] = useState(autoPlay);
     const [containerWidth, setContainerWidth] = useState(0);
     const intervalRef = useRef(null);
     const slideshowRef = useRef(null);
     const trackRef = useRef(null);
+    // Tracks whether the pointer moved during the current press. The browser fires a `click`
+    // after a drag's `mouseup`, by which point `isDragging` state has already been reset — so a
+    // swipe would otherwise be treated as a click (e.g. opening a lightbox). This synchronous ref
+    // lets `handleSlideClick` suppress that trailing click.
+    const hasDraggedRef = useRef(false);
     // Track container width for slideWidth-based visible slide calculation
     useEffect(() => {
         const container = trackRef.current?.parentElement;
@@ -294,6 +302,23 @@ export const Slideshow = observer((properties) => {
     const computedSlidesToShow = slideWidth && containerWidth > 0 ? Math.max(1, Math.floor(containerWidth / (slideWidth + (gap ?? 0)))) : slidesToShow ?? 4;
     const visibleSlides = Math.min(computedSlidesToShow, totalSlides);
     const maxIndex = Math.max(0, totalSlides - visibleSlides);
+    // Navigate to startIndex when it changes (e.g. a consumer syncing the active slide to external
+    // state), clamped to the valid range. Updates the index in place rather than remounting.
+    // maxIndex must be a dependency: in slideWidth mode it is derived from the slidesToShow
+    // fallback until the container is measured (after the first render), so the mount-time clamp
+    // can land short and needs to re-run when the real value arrives. But once the requested
+    // startIndex has been satisfied the effect must go inert, or every resize that shifts
+    // maxIndex would yank the shopper back to startIndex mid-navigation.
+    const appliedStartIndexRef = useRef(undefined);
+    useEffect(() => {
+        const target = Math.max(0, startIndex ?? 0);
+        if (appliedStartIndexRef.current === target)
+            return;
+        setCurrentIndex(Math.min(target, maxIndex));
+        if (target <= maxIndex) {
+            appliedStartIndexRef.current = target;
+        }
+    }, [startIndex, maxIndex]);
     // Calculate slide groups for pagination
     const slideGroups = [];
     for (let i = 0; i <= maxIndex; i += slidesToMove) {
@@ -339,6 +364,7 @@ export const Slideshow = observer((properties) => {
     const handleDragStart = (clientX) => {
         if (!touchDragging)
             return;
+        hasDraggedRef.current = false;
         setIsPlaying(false);
         setIsDragging(true);
         setStartX(clientX);
@@ -353,6 +379,11 @@ export const Slideshow = observer((properties) => {
             return;
         setCurrentX(clientX);
         const diff = clientX - startX;
+        // Past a few pixels of travel this is a drag, not a click — flag it so the trailing
+        // click (fired after mouseup/touchend) doesn't trigger slide onClick handlers.
+        if (Math.abs(diff) > DRAG_CLICK_THRESHOLD) {
+            hasDraggedRef.current = true;
+        }
         setDragOffset(diff);
     };
     const handleDragEnd = () => {
@@ -434,7 +465,7 @@ export const Slideshow = observer((properties) => {
     };
     // Handle image click
     const handleSlideClick = (slide, index) => {
-        if (slide.onClick && !isDragging) {
+        if (slide.onClick && !isDragging && !hasDraggedRef.current) {
             slide.onClick(slide, index);
         }
     };
@@ -442,7 +473,9 @@ export const Slideshow = observer((properties) => {
     const handleSlideKeyDown = (event, slide, index) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
-            handleSlideClick(slide, index);
+            if (slide.onClick && !isDragging) {
+                slide.onClick(slide, index);
+            }
         }
     };
     // Keyboard navigation
@@ -576,7 +609,7 @@ export const Slideshow = observer((properties) => {
                         }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
                         // Touch events
                         // @ts-ignore - touch events
-                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0]) : undefined, 
+                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
                             ? (event) => {

package/dist/esm/components/src/components/Molecules/Swatches/Swatches.js

@@ -116,7 +116,7 @@ export const Swatches = observer((properties) => {
             // default props
             internalClassName: 'ss__swatches__slideshow',
             loop: false,
-            slidesToShow: 6, // Add explicit slidesToShow
+            slideWidth: 20, // Fixed swatch size so previews stay a consistent, legible size regardless of container width
             slidesToMove: 1, // Add explicit slidesToMove
             gap: 8, // Add smaller gap
             showNavigation: true, // Enable navigation

package/dist/esm/components/src/components/Molecules/VariantSelection/VariantSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAqLzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}
+{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CA2LzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}

package/dist/esm/components/src/components/Molecules/VariantSelection/VariantSelection.js

@@ -148,7 +148,13 @@ export const VariantSelection = observer((properties) => {
                         'ss__variant-selection__option--selected': selected,
                         'ss__variant-selection__option--disabled': val.disabled,
                         'ss__variant-selection__option--unavailable': val.available === false,
-                    }), onClick: (e) => !val.disabled && onSelectHandler(e, val), ref: (e) => useA11y(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
+                    }), onClick: (e) => {
+                        if (!val.disabled) {
+                            onSelectHandler(e, val);
+                            // close the dropdown on selection
+                            toggleOpen?.(e, false);
+                        }
+                    }, ref: (e) => useA11y(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
             }) }));
     };
     return selection.values.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className, internalClassName), children: (() => {