@searchspring/snap-preact-components 0.41.2 → 0.42.0

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.stories.js

@@ -22,7 +22,7 @@ export default {
     argTypes: {
         values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'facet values store array',
@@ -30,6 +30,16 @@ export default {
             },
             control: { type: 'none' },
         },
+        facet: {
+            description: 'Facet store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
+        },
         hideCheckbox: {
             defaultValue: false,
             description: 'Hide facet option checkbox',

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
-import type { FacetValue } from '@searchspring/snap-store-mobx';
+import type { FacetValue, ValueFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetPaletteOptions: ((properties: FacetPaletteOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetPaletteOptionsProps extends ComponentProps {
-    values: FacetValue[];
+    values?: FacetValue[];
     hideLabel?: boolean;
     columns?: number;
     gapSize?: string;
     hideIcon?: boolean;
+    facet?: ValueFacet;
     onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA+EhE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CA4E7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA+E5E,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CAoF7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.js

@@ -92,7 +92,7 @@ export const FacetPaletteOptions = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.facetPaletteOptions,
     };
-    const { values, hideLabel, columns, gapSize, hideIcon, onClick, previewOnFocus, valueProps, disableStyles, className, style } = props;
+    const { values, hideLabel, columns, gapSize, hideIcon, onClick, previewOnFocus, valueProps, facet, disableStyles, className, style } = props;
     const subProps = {
         icon: {
             // default props
@@ -117,8 +117,13 @@ export const FacetPaletteOptions = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return values?.length ? (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-palette-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), "aria-label": value.value, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
+    const facetValues = values || facet?.values;
+    return facetValues?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-palette-options', className) }, facetValues.map((value) => (jsx("a", { className: classnames('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), "aria-label": value.filtered
+                ? `remove selected filter ${facet?.label || ''} - ${value.label}`
+                : facet?.label
+                    ? `filter by ${facet?.label} - ${value.label}`
+                    : `filter by ${value.label}`, ...valueProps, onMouseEnter: (e) => previewOnFocus && valueProps.onMouseEnter(e, value), href: value.url?.link?.href, onClick: (e) => {
                 value.url?.link?.onClick(e);
                 onClick && onClick(e);
             } },

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.d.ts

@@ -79,6 +79,20 @@ declare const _default: {
                 type: string;
             };
         };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         columns: {
             defaultValue: number;
             description: string;

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPaletteOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAItF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwGE;AAUF,eAAO,MAAM,OAAO;WAAU,wBAAwB;;wBAAsD,gBAAgB;;;;;;CAE3H,CAAC"}
+{"version":3,"file":"FacetPaletteOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAItF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAkHE;AAUF,eAAO,MAAM,OAAO;WAAU,wBAAwB;;wBAAsD,gBAAgB;;;;;;CAE3H,CAAC"}

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.js

@@ -22,7 +22,7 @@ export default {
     argTypes: {
         values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'facet values store array',
@@ -30,6 +30,16 @@ export default {
             },
             control: { type: 'none' },
         },
+        facet: {
+            description: 'Facet store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
+        },
         columns: {
             defaultValue: 4,
             description: 'Number of columns in palette',

package/dist/esm/components/Molecules/FacetSlider/FacetSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAwIhE,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAoJ7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpC"}
+{"version":3,"file":"FacetSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAyIhE,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAyJ7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpC"}

package/dist/esm/components/Molecules/FacetSlider/FacetSlider.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import { useRanger } from 'react-ranger';
 import { useTheme, CacheProvider } from '../../../providers';
 import { sprintf } from '../../../utilities';
+import { useA11y } from '../../../hooks';
 const CSS = {
     facetSlider: ({ railColor, trackColor, handleColor, valueTextColor, handleDraggingColor, showTicks, stickyHandleLabel, tickTextColor, theme, }) => css({
         display: 'flex',
@@ -205,7 +206,7 @@ export const FacetSlider = observer((properties) => {
                             background: 'transparent',
                             outline: 'none',
                         },
-                    }) },
+                    }), "aria-label": `${facet.label} slider button`, "aria-valuetext": `${facet.label} slider button, current value ${value}, ${facet.range?.low ? `min value ${facet.range?.low},` : ``} ${facet.range?.high ? `max value ${facet.range?.high}` : ``}`, ref: (e) => useA11y(e) },
                     jsx("div", { className: classnames('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && (jsx("label", { className: classnames('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', `ss__facet-slider__handle__label--${idx}`, { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == facet?.range?.low }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == facet?.range?.high }) }, sprintf(facet.formatValue, value))))))))),
             !stickyHandleLabel && (jsx("div", { className: 'ss__facet-slider__labels' }, handles.map(({ value }, idx) => (jsx("label", { className: classnames('ss__facet-slider__label', `ss__facet-slider__label--${idx}`) }, sprintf(facet.formatValue, value))))))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Molecules/Filter/Filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAqBjE,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAgFnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAqBjE,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAiFnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/esm/components/Molecules/Filter/Filter.js

@@ -75,11 +75,11 @@ export const Filter = observer((properties) => {
         styling.css = [style];
     }
     return value ? (jsx(CacheProvider, null,
-        jsx("a", { ...styling, className: classnames('ss__filter', className), onClick: (e) => {
+        jsx("a", { ...styling, className: classnames('ss__filter', className), "aria-label": !label ? value : `remove selected ${label} filter ${value}`, onClick: (e) => {
                 link?.onClick && link.onClick(e);
                 onClick && onClick(e);
             }, href: link?.href },
-            jsx(Button, { ...subProps.button },
+            jsx(Button, { ...subProps.button, disableA11y: true },
                 jsx(Icon, { ...subProps.icon }),
                 !hideFacetLabel && (jsx("span", { className: "ss__filter__label" },
                     label,

package/dist/esm/components/Molecules/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAqB3E,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,WAAW;;CAwH3E,CAAC;AAMH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAClC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAqB3E,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,WAAW;;CAsI3E,CAAC;AAMH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAClC"}

package/dist/esm/components/Molecules/Pagination/Pagination.js

@@ -64,15 +64,15 @@ export const Pagination = observer((properties) => {
     }
     return store?.totalResults ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__pagination', className) },
-            jsx(Fragment, null,
-                store.previous && !hidePrev && (jsx("a", { ...store.previous.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--previous'), "aria-label": 'previous page' }, prevButton ? prevButton : jsx(Icon, { ...subProps.icon, icon: 'angle-left' }))),
+            jsx("nav", { role: "navigation", "aria-label": "Pagination" },
+                store.previous && !hidePrev && (jsx("a", { ...store.previous.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--previous'), "aria-label": 'go to previous page' }, prevButton ? prevButton : jsx(Icon, { ...subProps.icon, icon: 'angle-left' }))),
                 !pageNumbers.includes(store.first.number) && !hideFirst && (jsx(Fragment, null,
-                    jsx("a", { ...store.first.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--first'), "aria-label": 'first page' }, firstButton ? firstButton : store.first.number),
+                    jsx("a", { ...store.first.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--first'), "aria-label": 'go to first page' }, firstButton ? firstButton : store.first.number),
                     !pageNumbers.includes(2) && !hideEllipsis && jsx("span", null, "\u2026"))),
                 _pages &&
-                    _pages.map((page) => page.active ? (jsx("span", { className: classnames('ss__pagination__page', 'ss__pagination__page--active') }, page.number)) : (jsx("a", { ...page.url.link, className: "ss__pagination__page", "aria-label": `page ${page.number}` }, page.number))),
+                    _pages.map((page) => page.active ? (jsx("span", { className: classnames('ss__pagination__page', 'ss__pagination__page--active'), "aria-label": `go to page ${page.number}`, "aria-current": "true" }, page.number)) : (jsx("a", { ...page.url.link, className: "ss__pagination__page", "aria-label": `go to page ${page.number}` }, page.number))),
                 !pageNumbers.includes(store.last.number) && !hideLast && (jsx(Fragment, null,
                     !pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && jsx("span", null, "\u2026"),
-                    jsx("a", { ...store.last.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--last'), "aria-label": 'last page' }, lastButton ? lastButton : store.last.number))),
-                store.next && !hideNext && (jsx("a", { ...store.next.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'next page' }, nextButton ? nextButton : jsx(Icon, { ...subProps.icon, icon: 'angle-right' }))))))) : (jsx(Fragment, null));
+                    jsx("a", { ...store.last.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--last'), "aria-label": `go to last page ${store.last.number}` }, lastButton ? lastButton : store.last.number))),
+                store.next && !hideNext && (jsx("a", { ...store.next.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'go to next page' }, nextButton ? nextButton : jsx(Icon, { ...subProps.icon, icon: 'angle-right' }))))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Molecules/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAwC7D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAyMnE,CAAC;AAQH,oBAAY,MAAM,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,YAAY,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyC7D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAyNnE,CAAC;AAQH,oBAAY,MAAM,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,YAAY,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

package/dist/esm/components/Molecules/Select/Select.js

@@ -9,6 +9,7 @@ import { defined } from '../../../utilities';
 import { Dropdown } from '../../Atoms/Dropdown';
 import { Button } from '../../Atoms/Button';
 import { Icon } from '../../Atoms/Icon';
+import { useA11y } from '../../../hooks/useA11y';
 const CSS = {
     select: ({ color, backgroundColor, borderColor, theme }) => css({
         display: 'inline-flex',
@@ -138,6 +139,7 @@ export const Select = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
+    const selectedOptions = options.filter((option) => selection?.value === option.value);
     // options can be an Array or ObservableArray - but should have length
     return typeof options == 'object' && options?.length ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__select', { 'ss__select--disabled': disabled }, className) }, native ? (jsx(Fragment, null,
@@ -155,13 +157,13 @@ export const Select = observer((properties) => {
                     !disabled && makeSelection(e, selectedOption);
                 } },
                 !selection && clearSelection && (jsx("option", { className: "ss__select__select__option", selected: true, value: "" }, clearSelection)),
-                options.map((option, index) => (jsx("option", { className: "ss__select__select__option", selected: selection?.value === option.value, value: option.value ?? index }, option.label)))))) : (jsx(Dropdown, { ...subProps.dropdown, disableClickOutside: disableClickOutside, open: open, onToggle: (e, state) => setOpen((prev) => state ?? !prev), onClick: (e) => setOpen((prev) => !prev), button: jsx(Button, { ...subProps.button },
-                label && !hideLabelOnSelection && (jsx("span", { className: "ss__select__label" },
+                options.map((option, index) => (jsx("option", { className: "ss__select__select__option", selected: selection?.value === option.value, value: option.value ?? index }, option.label)))))) : (jsx(Dropdown, { ...subProps.dropdown, disableClickOutside: disableClickOutside, open: open, onToggle: (e, state) => setOpen((prev) => state ?? !prev), onClick: (e) => setOpen((prev) => !prev), disableA11y: true, button: jsx(Button, { ...subProps.button, disableA11y: true },
+                label && !hideLabelOnSelection && (jsx("span", { className: "ss__select__label", ref: (e) => useA11y(e), "aria-label": `${label} dropdown, ${options.length} options ${selectedOptions.length ? `, Currently selected option is ${selectedOptions[0].label}` : ''}`, "aria-expanded": open, role: "button" },
                     label,
                     separator && selection && jsx("span", { className: "ss__select__label__separator" }, separator))),
                 selection && jsx("span", { className: "ss__select__selection" }, selection?.label),
                 jsx(Icon, { ...subProps.icon, icon: open ? iconClose : iconOpen })) },
-            jsx("ul", { className: "ss__select__select" }, options.map((option) => (jsx("li", { className: classnames('ss__select__select__option', {
+            jsx("ul", { className: "ss__select__select" }, options.map((option, idx) => (jsx("li", { ref: (e) => useA11y(e), role: 'link', "aria-label": `${selection?.value === option.value ? 'selected option,' : ''} option ${idx + 1} of ${options.length}, ${option.label}`, className: classnames('ss__select__select__option', {
                     'ss__select__select__option--selected': selection?.value === option.value,
                 }), onClick: (e) => !disabled && makeSelection(e, option) },
                 jsx("span", null, option.label)))))))))) : (jsx(Fragment, null));

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

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyB5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0F/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,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;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA0B5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAoG/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,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;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

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

@@ -62,7 +62,16 @@ export function Slideout(properties) {
     };
     // state
     const [isActive, setActive] = useState(Boolean(active));
+    const [renderContent, setRenderContent] = useState(Boolean(active));
     const toggleActive = () => {
+        if (isActive) {
+            setTimeout(() => {
+                setRenderContent(!renderContent);
+            }, 250);
+        }
+        else {
+            setRenderContent(!isActive);
+        }
         setActive(!isActive);
         document.body.style.overflow = isActive ? 'hidden' : '';
     };
@@ -80,6 +89,6 @@ export function Slideout(properties) {
     return isVisible ? (jsx(CacheProvider, null,
         buttonContent &&
             (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive })) : (jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive() }, cloneWithProps(buttonContent, { active: isActive })))),
-        jsx("div", { className: classnames('ss__slideout', className, { 'ss__slideout--active': isActive }), ...styling }, cloneWithProps(children, { toggleActive, active: isActive })),
+        jsx("div", { className: classnames('ss__slideout', className, { 'ss__slideout--active': isActive }), ...styling }, renderContent && cloneWithProps(children, { toggleActive, active: isActive })),
         jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive }))) : (jsx(Fragment, null));
 }

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAqd/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAge/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js

@@ -173,10 +173,13 @@ export const Autocomplete = observer((properties) => {
     let delayTimeout;
     const delayTime = 333;
     const valueProps = {
-        onMouseEnter: (e) => {
+        onMouseEnter: (e, activeTerm) => {
             clearTimeout(delayTimeout);
             delayTimeout = window.setTimeout(() => {
                 e.target.focus();
+                if (activeTerm && activeTerm.preview) {
+                    activeTerm.preview();
+                }
             }, delayTime);
         },
         onMouseLeave: () => {
@@ -294,7 +297,7 @@ export const Autocomplete = observer((properties) => {
             theme: props.theme,
         },
     };
-    const { search, terms, trending, results, merchandising, pagination, loaded, filters, facets, state } = controller.store;
+    const { search, terms, trending, results, merchandising, pagination, loaded, filters, facets, state, loading } = controller.store;
     const history = controller.store.history || [];
     // you can pass in a selector or the actual input element,
     // if its the selector, we need to bind it to the controller here.
@@ -307,28 +310,24 @@ export const Autocomplete = observer((properties) => {
     }
     const visible = Boolean(input === state.focusedInput) &&
         (terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
+    const trendingActive = trending?.filter((term) => term.active).pop();
+    const historyActive = history?.filter((term) => term.active).pop();
     let showTrending = false;
-    if (trending?.length && (retainTrending || (!results.length && !state.input))) {
-        showTrending = true;
-    }
-    else if (trending?.length && !terms.length) {
-        // has results and trending -> show trending terms while term load
+    if (trending?.length && ((retainTrending && controller.store.loaded) || (!results.length && !state.input))) {
         showTrending = true;
     }
     let showHistory = false;
-    if (history?.length && (retainHistory || (!results.length && !state.input))) {
+    if (history?.length && ((retainHistory && controller.store.loaded) || (!results.length && !state.input))) {
         showHistory = true;
     }
-    else if (history?.length && !terms.length) {
-        // has results and trending -> show trending terms while term load
+    if (!state.input && (historyActive || trendingActive)) {
         showHistory = true;
+        showTrending = true;
     }
     const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== FacetDisplay.SLIDER) : [];
-    const onlyTerms = (trending?.length || history.length) && !loaded;
+    const onlyTerms = (trending?.length || history.length) && !loaded && !loading;
     // results logic
     let showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string);
-    const trendingActive = trending?.filter((term) => term.active).pop();
-    const historyActive = history?.filter((term) => term.active).pop();
     if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
         showResults = false;
     }
@@ -370,24 +369,24 @@ export const Autocomplete = observer((properties) => {
                 terms.length > 0 ? (jsx("div", { className: "ss__autocomplete__terms__suggestions" },
                     termsTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions" },
                         jsx("h5", null, termsTitle))) : null,
-                    jsx("div", { className: "ss__autocomplete__terms__options" }, terms.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
+                    jsx("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": termsTitle }, terms.map((term, idx) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
+                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onMouseEnter: (e) => valueProps.onMouseEnter(e, term), role: "link", "aria-label": `item ${idx + 1} of ${terms.length}, ${term.value}` }, emIfy(term.value, state.input || '')))))))) : null,
                 showTrending && !hideTrending ? (jsx("div", { className: "ss__autocomplete__terms__trending" },
                     trendingTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
                         jsx("h5", null, trendingTitle))) : null,
-                    jsx("div", { className: "ss__autocomplete__terms__options" }, trending.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
+                    jsx("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": trendingTitle }, trending.map((term, idx) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
+                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onMouseEnter: (e) => valueProps.onMouseEnter(e, term), role: "link", "aria-label": `item ${idx + 1} of ${trending.length}, ${term.value}` }, emIfy(term.value, state.input || '')))))))) : null,
                 showHistory && !hideHistory ? (jsx("div", { className: "ss__autocomplete__terms__history" },
                     historyTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
                         jsx("h5", null, historyTitle))) : null,
-                    jsx("div", { className: "ss__autocomplete__terms__options" }, history.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
+                    jsx("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": historyTitle }, history.map((term, idx) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
+                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onMouseEnter: () => term.preview(), role: "link", "aria-label": `item ${idx + 1} of ${history.length}, ${term.value}` }, emIfy(term.value, state.input || '')))))))) : null)))),
             !hideFacets &&
                 (facetsSlot ? (jsx("div", { className: "ss__autocomplete__facets" }, cloneWithProps(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps }))) : (facetsToShow.length > 0 && (jsx(Fragment, null,
                     facetsTitle && vertical ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--facets') },

package/dist/esm/components/Organisms/Facet/Facet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAA4B,MAAM,gBAAgB,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAoD,MAAM,+BAA+B,CAAC;AAuC9H,eAAO,MAAM,KAAK,gBAAyB,UAAU,KAAG,WAAW;;CAwQjE,CAAC;AAcH,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACrD,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC;CAC/B;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,UAAU,GAAG;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAA4B,MAAM,gBAAgB,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAoD,MAAM,+BAA+B,CAAC;AAwC9H,eAAO,MAAM,KAAK,gBAAyB,UAAU,KAAG,WAAW;;CAyRjE,CAAC;AAcH,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACrD,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC;CAC/B;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,UAAU,GAAG;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B,CAAC"}

package/dist/esm/components/Organisms/Facet/Facet.js

@@ -14,6 +14,7 @@ import { Dropdown } from '../../Atoms/Dropdown';
 import { FacetDisplay } from '../../../types';
 import { defined, cloneWithProps } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
+import { useA11y } from '../../../hooks/useA11y';
 const CSS = {
     facet: ({ color, theme }) => css({
         width: '100%',
@@ -227,7 +228,7 @@ export const Facet = observer((properties) => {
     };
     return (facet && (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__facet', `ss__facet--${facet.display}`, `ss__facet--${facet.field}`, className) },
-            jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: (e) => !disableCollapse && facet.toggleCollapse && facet?.toggleCollapse(), button: jsx("div", { className: "ss__facet__header" },
+            jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: (e) => !disableCollapse && facet.toggleCollapse && facet?.toggleCollapse(), disableA11y: true, button: jsx("div", { className: "ss__facet__header", ref: (e) => useA11y(e, disableCollapse ? -1 : 0), role: "heading", "aria-level": 3, "aria-label": `currently ${facet?.collapsed ? 'collapsed' : 'open'} ${facet.label} facet dropdown ${facet.values?.length ? facet.values?.length + ' options' : ''}` },
                     facet?.label,
                     !disableCollapse && jsx(Icon, { ...subProps.icon, icon: facet?.collapsed ? iconExpand : iconCollapse })) },
                 searchable && searchableFacet.allowableTypes.includes(facet.display) && (jsx(SearchInput, { ...subProps.searchInput, onChange: searchableFacet.searchFilter, placeholder: `Search ${facet.label}` })),
@@ -241,17 +242,17 @@ export const Facet = observer((properties) => {
                             case FacetDisplay.SLIDER:
                                 return jsx(FacetSlider, { ...subProps.facetSlider, facet: facet });
                             case FacetDisplay.GRID:
-                                return jsx(FacetGridOptions, { ...subProps.facetGridOptions, values: limitedValues });
+                                return jsx(FacetGridOptions, { ...subProps.facetGridOptions, values: limitedValues, facet: facet });
                             case FacetDisplay.PALETTE:
-                                return jsx(FacetPaletteOptions, { ...subProps.facetPaletteOptions, values: limitedValues });
+                                return (jsx(FacetPaletteOptions, { ...subProps.facetPaletteOptions, values: limitedValues, facet: facet }));
                             case FacetDisplay.HIERARCHY:
-                                return jsx(FacetHierarchyOptions, { ...subProps.facetHierarchyOptions, values: limitedValues });
+                                return (jsx(FacetHierarchyOptions, { ...subProps.facetHierarchyOptions, values: limitedValues, facet: facet }));
                             default:
-                                return jsx(FacetListOptions, { ...subProps.facetListOptions, values: limitedValues });
+                                return jsx(FacetListOptions, { ...subProps.facetListOptions, values: limitedValues, facet: facet });
                         }
                     }
                 })()),
-                !disableOverflow && facet?.overflow?.enabled && (jsx("div", { className: "ss__facet__show-more-less", onClick: () => facet.overflow?.toggle() }, overflowSlot ? (cloneWithProps(overflowSlot, { facet })) : (jsx(Fragment, null,
+                !disableOverflow && facet?.overflow?.enabled && (jsx("div", { className: "ss__facet__show-more-less", onClick: () => facet.overflow?.toggle(), ref: (e) => useA11y(e) }, overflowSlot ? (cloneWithProps(overflowSlot, { facet })) : (jsx(Fragment, null,
                     jsx(Icon, { ...subProps.showMoreLessIcon, icon: (facet.overflow?.remaining || 0) > 0 ? iconOverflowMore : iconOverflowLess }),
                     jsx("span", null, (facet?.overflow?.remaining || 0) > 0 ? showMoreText : showLessText))))))))));
 });

package/dist/esm/hooks/index.d.ts

@@ -3,4 +3,5 @@ export * from './useConstructor';
 export * from './useMediaQuery';
 export * from './useIntersection';
 export * from './useDisplaySettings';
+export * from './useA11y';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC"}

package/dist/esm/hooks/index.js

@@ -3,3 +3,4 @@ export * from './useConstructor';
 export * from './useMediaQuery';
 export * from './useIntersection';
 export * from './useDisplaySettings';
+export * from './useA11y';

package/dist/esm/hooks/useA11y.d.ts

@@ -0,0 +1,2 @@
+export declare function useA11y(elem: any, tabIndex?: number): void;
+//# sourceMappingURL=useA11y.d.ts.map

package/dist/esm/hooks/useA11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useA11y.d.ts","sourceRoot":"","sources":["../../../src/hooks/useA11y.tsx"],"names":[],"mappings":"AAEA,wBAAgB,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,QAuBnD"}

package/dist/esm/hooks/useA11y.js

@@ -0,0 +1,21 @@
+export function useA11y(elem, tabIndex) {
+    const styleId = 'ssA11yFocusStyle';
+    if (!document.querySelector(`#${styleId}`)) {
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        style.id = styleId;
+        style.innerHTML = `[ssA11y]:focus-visible { outline: -webkit-focus-ring-color auto 1px !important; }`;
+        document.getElementsByTagName('head')[0].appendChild(style);
+    }
+    if (elem && !elem.attributes?.ssA11y) {
+        //A11y attribute is for debouncing on rerenders
+        elem.setAttribute('ssA11y', true);
+        //tab index 0 is default and used for actionable elements.
+        elem.setAttribute('tabIndex', `${tabIndex || 0}`);
+        elem.addEventListener('keydown', (event) => {
+            if (event.code === 'Space' || event.code === 'Enter') {
+                elem.click();
+            }
+        });
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-preact-components",
-	"version": "0.41.2",
+	"version": "0.42.0",
 	"description": "Snap Preact Component Library",
 	"author": "Searchspring",
 	"license": "MIT",
@@ -26,7 +26,7 @@
 	},
 	"dependencies": {
 		"@emotion/react": "11.9.0",
-		"@searchspring/snap-toolbox": "^0.41.2",
+		"@searchspring/snap-toolbox": "^0.42.0",
 		"classnames": "^2.3.2",
 		"deepmerge": "4.2.2",
 		"mobx-react-lite": "3.4.0",
@@ -37,14 +37,14 @@
 		"preact": "10.9.0"
 	},
 	"devDependencies": {
-		"@searchspring/snap-client": "^0.41.2",
-		"@searchspring/snap-controller": "^0.41.2",
-		"@searchspring/snap-event-manager": "^0.41.2",
-		"@searchspring/snap-logger": "^0.41.2",
-		"@searchspring/snap-profiler": "^0.41.2",
-		"@searchspring/snap-store-mobx": "^0.41.2",
-		"@searchspring/snap-tracker": "^0.41.2",
-		"@searchspring/snap-url-manager": "^0.41.2",
+		"@searchspring/snap-client": "^0.42.0",
+		"@searchspring/snap-controller": "^0.42.0",
+		"@searchspring/snap-event-manager": "^0.42.0",
+		"@searchspring/snap-logger": "^0.42.0",
+		"@searchspring/snap-profiler": "^0.42.0",
+		"@searchspring/snap-store-mobx": "^0.42.0",
+		"@searchspring/snap-tracker": "^0.42.0",
+		"@searchspring/snap-url-manager": "^0.42.0",
 		"@storybook/addon-actions": "6.4.22",
 		"@storybook/addon-controls": "6.4.22",
 		"@storybook/addon-docs": "6.4.22",
@@ -66,5 +66,5 @@
 		"ts-loader": "9.3.0"
 	},
 	"sideEffects": false,
-	"gitHead": "1a66d26b086734f724109f3d5c1f4977dfc16627"
+	"gitHead": "383a7dae4f04af4b60cc9d9c8aae8932c9df4685"
 }