npm - @searchspring/snap-preact-components - Versions diffs - 0.41.1 → 0.42.0 - Mend

@searchspring/snap-preact-components 0.41.1 → 0.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

package/dist/cjs/components/Molecules/FacetListOptions/FacetListOptions.stories.d.ts CHANGED Viewed

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

package/dist/cjs/components/Molecules/FacetListOptions/FacetListOptions.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FacetListOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAdb,~~wBAoFE~~;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}
1	+ {"version":3,"file":"FacetListOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA8FE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}

package/dist/cjs/components/Molecules/FacetListOptions/FacetListOptions.stories.js CHANGED Viewed

@@ -74,13 +74,22 @@ exports.default = {
     ],
     argTypes: __assign({ values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'facet values store array',
                 },
             },
             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/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts CHANGED Viewed

@@ -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/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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,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/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.js CHANGED Viewed

@@ -109,7 +109,7 @@ exports.FacetPaletteOptions = (0, mobx_react_lite_1.observer)(function (properti
     var props = __assign(__assign(__assign({
         // default props
         columns: 4, gapSize: '8px' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.facetPaletteOptions), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.facetPaletteOptions);
-    var values = props.values, hideLabel = props.hideLabel, columns = props.columns, gapSize = props.gapSize, hideIcon = props.hideIcon, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var values = props.values, hideLabel = props.hideLabel, columns = props.columns, gapSize = props.gapSize, hideIcon = props.hideIcon, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, facet = props.facet, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var subProps = {
         icon: __assign(__assign(__assign({
             // default props
@@ -129,10 +129,15 @@ exports.FacetPaletteOptions = (0, mobx_react_lite_1.observer)(function (properti
     else if (style) {
         styling.css = [style];
     }
-    return (values === null || values === void 0 ? void 0 : values.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-palette-options', className) }), values.map(function (value) {
+    var facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.values);
+    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-palette-options', className) }), facetValues.map(function (value) {
             var _a, _b;
-            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), "aria-label": value.value, onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps, { href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
+            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), "aria-label": value.filtered
+                    ? "remove selected filter ".concat((facet === null || facet === void 0 ? void 0 : facet.label) || '', " - ").concat(value.label)
+                    : (facet === null || facet === void 0 ? void 0 : facet.label)
+                        ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
+                        : "filter by ".concat(value.label) }, valueProps, { onMouseEnter: function (e) { return previewOnFocus && valueProps.onMouseEnter(e, value); }, href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
                     var _a, _b;
                     (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
                     onClick && onClick(e);

package/dist/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.d.ts CHANGED Viewed

@@ -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/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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,wBAkHE;AAUF,eAAO,MAAM,OAAO;WAAU,wBAAwB;;wBAAsD,gBAAgB;;;;;;CAE3H,CAAC"}

package/dist/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.js CHANGED Viewed

@@ -74,13 +74,22 @@ exports.default = {
     ],
     argTypes: __assign({ values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'facet values store array',
                 },
             },
             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/cjs/components/Molecules/FacetSlider/FacetSlider.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/cjs/components/Molecules/FacetSlider/FacetSlider.js CHANGED Viewed

@@ -24,6 +24,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_ranger_1 = require("react-ranger");
 var providers_1 = require("../../../providers");
 var utilities_1 = require("../../../utilities");
+var hooks_2 = require("../../../hooks");
 var CSS = {
     facetSlider: function (_a) {
         var _b, _c, _d, _e;
@@ -222,7 +223,7 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
                     return ((0, react_1.jsx)("div", __assign({ className: "".concat(idx === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment') }, getSegmentProps())));
                 }),
                 (0, react_1.jsx)("div", { className: 'ss__facet-slider__handles' }, handles.map(function (_a, idx) {
-                    var _b, _c;
+                    var _b, _c, _d, _e, _f, _g;
                     var value = _a.value, active = _a.active, getHandleProps = _a.getHandleProps;
                     return ((0, react_1.jsx)("button", __assign({ type: "button" }, getHandleProps({
                         style: {
@@ -231,8 +232,8 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
                             background: 'transparent',
                             outline: 'none',
                         },
-                    })),
-                        (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && ((0, react_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', "ss__facet-slider__handle__label--".concat(idx), { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == ((_b = facet === null || facet === void 0 ? void 0 : facet.range) === null || _b === void 0 ? void 0 : _b.low) }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == ((_c = facet === null || facet === void 0 ? void 0 : facet.range) === null || _c === void 0 ? void 0 : _c.high) }) }, (0, utilities_1.sprintf)(facet.formatValue, value))))));
+                    }), { "aria-label": "".concat(facet.label, " slider button"), "aria-valuetext": "".concat(facet.label, " slider button, current value ").concat(value, ", ").concat(((_b = facet.range) === null || _b === void 0 ? void 0 : _b.low) ? "min value ".concat((_c = facet.range) === null || _c === void 0 ? void 0 : _c.low, ",") : "", " ").concat(((_d = facet.range) === null || _d === void 0 ? void 0 : _d.high) ? "max value ".concat((_e = facet.range) === null || _e === void 0 ? void 0 : _e.high) : ""), ref: function (e) { return (0, hooks_2.useA11y)(e); } }),
+                        (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && ((0, react_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', "ss__facet-slider__handle__label--".concat(idx), { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == ((_f = facet === null || facet === void 0 ? void 0 : facet.range) === null || _f === void 0 ? void 0 : _f.low) }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == ((_g = facet === null || facet === void 0 ? void 0 : facet.range) === null || _g === void 0 ? void 0 : _g.high) }) }, (0, utilities_1.sprintf)(facet.formatValue, value))))));
                 }))),
             !stickyHandleLabel && ((0, react_1.jsx)("div", { className: 'ss__facet-slider__labels' }, handles.map(function (_a, idx) {
                 var value = _a.value;

package/dist/cjs/components/Molecules/Filter/Filter.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;;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/cjs/components/Molecules/Filter/Filter.js CHANGED Viewed

@@ -76,11 +76,11 @@ exports.Filter = (0, mobx_react_lite_1.observer)(function (properties) {
         styling.css = [style];
     }
     return value ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("a", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter', className), onClick: function (e) {
+        (0, react_1.jsx)("a", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter', className), "aria-label": !label ? value : "remove selected ".concat(label, " filter ").concat(value), onClick: function (e) {
                 (link === null || link === void 0 ? void 0 : link.onClick) && link.onClick(e);
                 onClick && onClick(e);
             }, href: link === null || link === void 0 ? void 0 : link.href }),
-            (0, react_1.jsx)(Button_1.Button, __assign({}, subProps.button),
+            (0, react_1.jsx)(Button_1.Button, __assign({}, subProps.button, { disableA11y: true }),
                 (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon)),
                 !hideFacetLabel && ((0, react_1.jsx)("span", { className: "ss__filter__label" },
                     label,

package/dist/cjs/components/Molecules/Pagination/Pagination.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;;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/cjs/components/Molecules/Pagination/Pagination.js CHANGED Viewed

@@ -74,17 +74,17 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     return (store === null || store === void 0 ? void 0 : store.totalResults) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__pagination', className) }),
-            (0, react_1.jsx)(preact_1.Fragment, null,
-                store.previous && !hidePrev && ((0, react_1.jsx)("a", __assign({}, store.previous.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous'), "aria-label": 'previous page' }), prevButton ? prevButton : (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-left' })))),
+            (0, react_1.jsx)("nav", { role: "navigation", "aria-label": "Pagination" },
+                store.previous && !hidePrev && ((0, react_1.jsx)("a", __assign({}, store.previous.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous'), "aria-label": 'go to previous page' }), prevButton ? prevButton : (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-left' })))),
                 !pageNumbers.includes(store.first.number) && !hideFirst && ((0, react_1.jsx)(preact_1.Fragment, null,
-                    (0, react_1.jsx)("a", __assign({}, store.first.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--first'), "aria-label": 'first page' }), firstButton ? firstButton : store.first.number),
+                    (0, react_1.jsx)("a", __assign({}, store.first.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--first'), "aria-label": 'go to first page' }), firstButton ? firstButton : store.first.number),
                     !pageNumbers.includes(2) && !hideEllipsis && (0, react_1.jsx)("span", null, "\u2026"))),
                 _pages &&
                     _pages.map(function (page) {
-                        return page.active ? ((0, react_1.jsx)("span", { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--active') }, page.number)) : ((0, react_1.jsx)("a", __assign({}, page.url.link, { className: "ss__pagination__page", "aria-label": "page ".concat(page.number) }), page.number));
+                        return page.active ? ((0, react_1.jsx)("span", { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--active'), "aria-label": "go to page ".concat(page.number), "aria-current": "true" }, page.number)) : ((0, react_1.jsx)("a", __assign({}, page.url.link, { className: "ss__pagination__page", "aria-label": "go to page ".concat(page.number) }), page.number));
                     }),
                 !pageNumbers.includes(store.last.number) && !hideLast && ((0, react_1.jsx)(preact_1.Fragment, null,
                     !pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && (0, react_1.jsx)("span", null, "\u2026"),
-                    (0, react_1.jsx)("a", __assign({}, store.last.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last'), "aria-label": 'last page' }), lastButton ? lastButton : store.last.number))),
-                store.next && !hideNext && ((0, react_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'next page' }), nextButton ? nextButton : (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right' })))))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+                    (0, react_1.jsx)("a", __assign({}, store.last.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last'), "aria-label": "go to last page ".concat(store.last.number) }), lastButton ? lastButton : store.last.number))),
+                store.next && !hideNext && ((0, react_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'go to next page' }), nextButton ? nextButton : (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right' })))))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/components/Molecules/Select/Select.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/cjs/components/Molecules/Select/Select.js CHANGED Viewed

@@ -35,6 +35,7 @@ var utilities_1 = require("../../../utilities");
 var Dropdown_1 = require("../../Atoms/Dropdown");
 var Button_1 = require("../../Atoms/Button");
 var Icon_1 = require("../../Atoms/Icon");
+var useA11y_1 = require("../../../hooks/useA11y");
 var CSS = {
     select: function (_a) {
         var _b, _c;
@@ -143,6 +144,7 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
+    var selectedOptions = options.filter(function (option) { return (selection === null || selection === void 0 ? void 0 : selection.value) === option.value; });
     // options can be an Array or ObservableArray - but should have length
     return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__select', { 'ss__select--disabled': disabled }, className) }), native ? ((0, react_1.jsx)(preact_1.Fragment, null,
@@ -163,13 +165,13 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
                 options.map(function (option, index) {
                     var _a;
                     return ((0, react_1.jsx)("option", { className: "ss__select__select__option", selected: (selection === null || selection === void 0 ? void 0 : selection.value) === option.value, value: (_a = option.value) !== null && _a !== void 0 ? _a : index }, option.label));
-                })))) : ((0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { disableClickOutside: disableClickOutside, open: open, onToggle: function (e, state) { return setOpen(function (prev) { return state !== null && state !== void 0 ? state : !prev; }); }, onClick: function (e) { return setOpen(function (prev) { return !prev; }); }, button: (0, react_1.jsx)(Button_1.Button, __assign({}, subProps.button),
-                label && !hideLabelOnSelection && ((0, react_1.jsx)("span", { className: "ss__select__label" },
+                })))) : ((0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { disableClickOutside: disableClickOutside, open: open, onToggle: function (e, state) { return setOpen(function (prev) { return state !== null && state !== void 0 ? state : !prev; }); }, onClick: function (e) { return setOpen(function (prev) { return !prev; }); }, disableA11y: true, button: (0, react_1.jsx)(Button_1.Button, __assign({}, subProps.button, { disableA11y: true }),
+                label && !hideLabelOnSelection && ((0, react_1.jsx)("span", { className: "ss__select__label", ref: function (e) { return (0, useA11y_1.useA11y)(e); }, "aria-label": "".concat(label, " dropdown, ").concat(options.length, " options ").concat(selectedOptions.length ? ", Currently selected option is ".concat(selectedOptions[0].label) : ''), "aria-expanded": open, role: "button" },
                     label,
                     separator && selection && (0, react_1.jsx)("span", { className: "ss__select__label__separator" }, separator))),
                 selection && (0, react_1.jsx)("span", { className: "ss__select__selection" }, selection === null || selection === void 0 ? void 0 : selection.label),
                 (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: open ? iconClose : iconOpen }))) }),
-            (0, react_1.jsx)("ul", { className: "ss__select__select" }, options.map(function (option) { return ((0, react_1.jsx)("li", { className: (0, classnames_1.default)('ss__select__select__option', {
+            (0, react_1.jsx)("ul", { className: "ss__select__select" }, options.map(function (option, idx) { return ((0, react_1.jsx)("li", { ref: function (e) { return (0, useA11y_1.useA11y)(e); }, role: 'link', "aria-label": "".concat((selection === null || selection === void 0 ? void 0 : selection.value) === option.value ? 'selected option,' : '', " option ").concat(idx + 1, " of ").concat(options.length, ", ").concat(option.label), className: (0, classnames_1.default)('ss__select__select__option', {
                     'ss__select__select__option--selected': (selection === null || selection === void 0 ? void 0 : selection.value) === option.value,
                 }), onClick: function (e) { return !disabled && makeSelection(e, option); } },
                 (0, react_1.jsx)("span", null, option.label))); }))))))) : ((0, react_1.jsx)(preact_1.Fragment, null));

package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/cjs/components/Molecules/Slideout/Slideout.js CHANGED Viewed

@@ -66,7 +66,16 @@ function Slideout(properties) {
     };
     // state
     var _e = (0, hooks_1.useState)(Boolean(active)), isActive = _e[0], setActive = _e[1];
+    var _f = (0, hooks_1.useState)(Boolean(active)), renderContent = _f[0], setRenderContent = _f[1];
     var toggleActive = function () {
+        if (isActive) {
+            setTimeout(function () {
+                setRenderContent(!renderContent);
+            }, 250);
+        }
+        else {
+            setRenderContent(!isActive);
+        }
         setActive(!isActive);
         document.body.style.overflow = isActive ? 'hidden' : '';
     };
@@ -84,7 +93,7 @@ function Slideout(properties) {
     return isVisible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         buttonContent &&
             (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive: toggleActive, active: isActive })) : ((0, react_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); } }, (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive })))),
-        (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, { 'ss__slideout--active': isActive }) }, styling), (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive })),
+        (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, { 'ss__slideout--active': isActive }) }, styling), renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive })),
         (0, react_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 }
 exports.Slideout = Slideout;

package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;;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/cjs/components/Organisms/Autocomplete/Autocomplete.js CHANGED Viewed

@@ -184,10 +184,13 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
     var delayTimeout;
     var delayTime = 333;
     var valueProps = {
-        onMouseEnter: function (e) {
+        onMouseEnter: function (e, activeTerm) {
             clearTimeout(delayTimeout);
             delayTimeout = window.setTimeout(function () {
                 e.target.focus();
+                if (activeTerm && activeTerm.preview) {
+                    activeTerm.preview();
+                }
             }, delayTime);
         },
         onMouseLeave: function () {
@@ -277,7 +280,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
             // component theme overrides
             theme: props.theme }),
     };
-    var _o = controller.store, search = _o.search, terms = _o.terms, trending = _o.trending, results = _o.results, merchandising = _o.merchandising, pagination = _o.pagination, loaded = _o.loaded, filters = _o.filters, facets = _o.facets, state = _o.state;
+    var _o = controller.store, search = _o.search, terms = _o.terms, trending = _o.trending, results = _o.results, merchandising = _o.merchandising, pagination = _o.pagination, loaded = _o.loaded, filters = _o.filters, facets = _o.facets, state = _o.state, loading = _o.loading;
     var 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.
@@ -290,28 +293,24 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     var visible = Boolean(input === state.focusedInput) &&
         (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || (history === null || history === void 0 ? void 0 : history.length) > 0 || (state.input && controller.store.loaded));
+    var trendingActive = trending === null || trending === void 0 ? void 0 : trending.filter(function (term) { return term.active; }).pop();
+    var historyActive = history === null || history === void 0 ? void 0 : history.filter(function (term) { return term.active; }).pop();
     var showTrending = false;
-    if ((trending === null || trending === void 0 ? void 0 : trending.length) && (retainTrending || (!results.length && !state.input))) {
-        showTrending = true;
-    }
-    else if ((trending === null || trending === void 0 ? void 0 : trending.length) && !terms.length) {
-        // has results and trending -> show trending terms while term load
+    if ((trending === null || trending === void 0 ? void 0 : trending.length) && ((retainTrending && controller.store.loaded) || (!results.length && !state.input))) {
         showTrending = true;
     }
     var showHistory = false;
-    if ((history === null || history === void 0 ? void 0 : history.length) && (retainHistory || (!results.length && !state.input))) {
+    if ((history === null || history === void 0 ? void 0 : history.length) && ((retainHistory && controller.store.loaded) || (!results.length && !state.input))) {
         showHistory = true;
     }
-    else if ((history === null || history === void 0 ? void 0 : history.length) && !terms.length) {
-        // has results and trending -> show trending terms while term load
+    if (!state.input && (historyActive || trendingActive)) {
         showHistory = true;
+        showTrending = true;
     }
     var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
-    var onlyTerms = ((trending === null || trending === void 0 ? void 0 : trending.length) || history.length) && !loaded;
+    var onlyTerms = ((trending === null || trending === void 0 ? void 0 : trending.length) || history.length) && !loaded && !loading;
     // results logic
     var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string));
-    var trendingActive = trending === null || trending === void 0 ? void 0 : trending.filter(function (term) { return term.active; }).pop();
-    var historyActive = history === null || history === void 0 ? void 0 : history.filter(function (term) { return term.active; }).pop();
     if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
         showResults = false;
     }
@@ -353,24 +352,24 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                 terms.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__suggestions" },
                     termsTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions" },
                         (0, react_1.jsx)("h5", null, termsTitle))) : null,
-                    (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, terms.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
+                    (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": termsTitle }, terms.map(function (term, idx) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null,
+                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onMouseEnter: function (e) { return valueProps.onMouseEnter(e, term); }, role: "link", "aria-label": "item ".concat(idx + 1, " of ").concat(terms.length, ", ").concat(term.value) }), emIfy(term.value, state.input || '')))); })))) : null,
                 showTrending && !hideTrending ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__trending" },
                     trendingTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
                         (0, react_1.jsx)("h5", null, trendingTitle))) : null,
-                    (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, trending.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
+                    (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": trendingTitle }, trending.map(function (term, idx) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null,
+                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onMouseEnter: function (e) { return valueProps.onMouseEnter(e, term); }, role: "link", "aria-label": "item ".concat(idx + 1, " of ").concat(trending.length, ", ").concat(term.value) }), emIfy(term.value, state.input || '')))); })))) : null,
                 showHistory && !hideHistory ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__history" },
                     historyTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
                         (0, react_1.jsx)("h5", null, historyTitle))) : null,
-                    (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, history.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
+                    (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": historyTitle }, history.map(function (term, idx) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null)))),
+                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onMouseEnter: function () { return term.preview(); }, role: "link", "aria-label": "item ".concat(idx + 1, " of ").concat(history.length, ", ").concat(term.value) }), emIfy(term.value, state.input || '')))); })))) : null)))),
             !hideFacets &&
                 (facetsSlot ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__facets" }, (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising: merchandising, facetsTitle: facetsTitle, hideBanners: hideBanners, controller: controller, valueProps: valueProps }))) : (facetsToShow.length > 0 && ((0, react_1.jsx)(preact_1.Fragment, null,
                     facetsTitle && vertical ? ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets') },

package/dist/cjs/components/Organisms/Facet/Facet.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/cjs/components/Organisms/Facet/Facet.js CHANGED Viewed

@@ -31,6 +31,7 @@ var Dropdown_1 = require("../../Atoms/Dropdown");
 var types_1 = require("../../../types");
 var utilities_1 = require("../../../utilities");
 var providers_1 = require("../../../providers");
+var useA11y_1 = require("../../../hooks/useA11y");
 var CSS = {
     facet: function (_a) {
         var _b;
@@ -68,7 +69,7 @@ var CSS = {
     },
 };
 exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     var globalTheme = (0, providers_1.useTheme)();
     var theme = __assign(__assign({}, globalTheme), properties.theme);
     var props = __assign(__assign(__assign({
@@ -181,7 +182,7 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
     };
     return (facet && ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.display), "ss__facet--".concat(facet.field), className) }),
-            (0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function (e) { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, button: (0, react_1.jsx)("div", { className: "ss__facet__header" }, facet === null || facet === void 0 ? void 0 :
+            (0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function (e) { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, disableA11y: true, button: (0, react_1.jsx)("div", { className: "ss__facet__header", ref: function (e) { return (0, useA11y_1.useA11y)(e, disableCollapse ? -1 : 0); }, role: "heading", "aria-level": 3, "aria-label": "currently ".concat((facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'collapsed' : 'open', " ").concat(facet.label, " facet dropdown ").concat(((_r = facet.values) === null || _r === void 0 ? void 0 : _r.length) ? ((_s = facet.values) === null || _s === void 0 ? void 0 : _s.length) + ' options' : '') }, facet === null || facet === void 0 ? void 0 :
                     facet.label,
                     !disableCollapse && (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? iconExpand : iconCollapse }))) }),
                 searchable && searchableFacet.allowableTypes.includes(facet.display) && ((0, react_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { onChange: searchableFacet.searchFilter, placeholder: "Search ".concat(facet.label) }))),
@@ -195,17 +196,17 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
                             case types_1.FacetDisplay.SLIDER:
                                 return (0, react_1.jsx)(FacetSlider_1.FacetSlider, __assign({}, subProps.facetSlider, { facet: facet }));
                             case types_1.FacetDisplay.GRID:
-                                return (0, react_1.jsx)(FacetGridOptions_1.FacetGridOptions, __assign({}, subProps.facetGridOptions, { values: limitedValues }));
+                                return (0, react_1.jsx)(FacetGridOptions_1.FacetGridOptions, __assign({}, subProps.facetGridOptions, { values: limitedValues, facet: facet }));
                             case types_1.FacetDisplay.PALETTE:
-                                return (0, react_1.jsx)(FacetPaletteOptions_1.FacetPaletteOptions, __assign({}, subProps.facetPaletteOptions, { values: limitedValues }));
+                                return ((0, react_1.jsx)(FacetPaletteOptions_1.FacetPaletteOptions, __assign({}, subProps.facetPaletteOptions, { values: limitedValues, facet: facet })));
                             case types_1.FacetDisplay.HIERARCHY:
-                                return (0, react_1.jsx)(FacetHierarchyOptions_1.FacetHierarchyOptions, __assign({}, subProps.facetHierarchyOptions, { values: limitedValues }));
+                                return ((0, react_1.jsx)(FacetHierarchyOptions_1.FacetHierarchyOptions, __assign({}, subProps.facetHierarchyOptions, { values: limitedValues, facet: facet })));
                             default:
-                                return (0, react_1.jsx)(FacetListOptions_1.FacetListOptions, __assign({}, subProps.facetListOptions, { values: limitedValues }));
+                                return (0, react_1.jsx)(FacetListOptions_1.FacetListOptions, __assign({}, subProps.facetListOptions, { values: limitedValues, facet: facet }));
                         }
                     }
                 })()),
-                !disableOverflow && ((_r = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _r === void 0 ? void 0 : _r.enabled) && ((0, react_1.jsx)("div", { className: "ss__facet__show-more-less", onClick: function () { var _a; return (_a = facet.overflow) === null || _a === void 0 ? void 0 : _a.toggle(); } }, overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet: facet })) : ((0, react_1.jsx)(preact_1.Fragment, null,
-                    (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.showMoreLessIcon, { icon: (((_s = facet.overflow) === null || _s === void 0 ? void 0 : _s.remaining) || 0) > 0 ? iconOverflowMore : iconOverflowLess })),
-                    (0, react_1.jsx)("span", null, (((_t = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _t === void 0 ? void 0 : _t.remaining) || 0) > 0 ? showMoreText : showLessText))))))))));
+                !disableOverflow && ((_t = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _t === void 0 ? void 0 : _t.enabled) && ((0, react_1.jsx)("div", { className: "ss__facet__show-more-less", onClick: function () { var _a; return (_a = facet.overflow) === null || _a === void 0 ? void 0 : _a.toggle(); }, ref: function (e) { return (0, useA11y_1.useA11y)(e); } }, overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet: facet })) : ((0, react_1.jsx)(preact_1.Fragment, null,
+                    (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.showMoreLessIcon, { icon: (((_u = facet.overflow) === null || _u === void 0 ? void 0 : _u.remaining) || 0) > 0 ? iconOverflowMore : iconOverflowLess })),
+                    (0, react_1.jsx)("span", null, (((_v = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _v === void 0 ? void 0 : _v.remaining) || 0) > 0 ? showMoreText : showLessText))))))))));
 });

package/dist/cjs/hooks/index.d.ts CHANGED Viewed

@@ -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/cjs/hooks/index.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;AACrC,cAAc,WAAW,CAAC"}

package/dist/cjs/hooks/index.js CHANGED Viewed

@@ -19,3 +19,4 @@ __exportStar(require("./useConstructor"), exports);
 __exportStar(require("./useMediaQuery"), exports);
 __exportStar(require("./useIntersection"), exports);
 __exportStar(require("./useDisplaySettings"), exports);
+__exportStar(require("./useA11y"), exports);

package/dist/cjs/hooks/useA11y.d.ts ADDED Viewed

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

package/dist/cjs/hooks/useA11y.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
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/cjs/hooks/useA11y.js ADDED Viewed

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useA11y = void 0;
+function useA11y(elem, tabIndex) {
+    var _a;
+    var styleId = 'ssA11yFocusStyle';
+    if (!document.querySelector("#".concat(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 && !((_a = elem.attributes) === null || _a === void 0 ? void 0 : _a.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', "".concat(tabIndex || 0));
+        elem.addEventListener('keydown', function (event) {
+            if (event.code === 'Space' || event.code === 'Enter') {
+                elem.click();
+            }
+        });
+    }
+}
+exports.useA11y = useA11y;

package/dist/esm/components/Atoms/Button/Button.d.ts CHANGED Viewed

@@ -14,5 +14,6 @@ export interface ButtonProps extends ComponentProps {
     disabled?: boolean;
     native?: boolean;
     onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    disableA11y?: boolean;
 }
 //# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/Atoms/Button/Button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;~~AA6B5D~~,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;~~CAmDnE~~,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;~~CACjE~~"}
1	+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA8B5D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAwDnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}