@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/collection/components/alert/alert.js

@@ -1,11 +1,12 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, Build, } from "@stencil/core";
 import Modal from "../../utils/modal";
 import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
-import { createColorClasses } from "../../utils/theme";
 import { transformTag, h } from "../../utils/renderer";
+import { blurActiveElement } from "../../utils/active-element";
+import { HasSlotController } from "../../utils/slot";
 let toastStackTr;
 let toastStackTl;
 let toastStackBl;
@@ -26,18 +27,35 @@ if (globalThis['document']) {
 }
 /**
  * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.
- * @slot - The alert's content.
+ * @status stable
+ * @version 2.0.0
+ *
+ * @slot - The alert's body content.
+ * @slot heading - a themed piece of text, normally used to quick flag to the user the type of alert (e.g. 'Error', 'Warning', 'Success')
+ * @slot title - A title for the alert.
  * @slot icon - An icon to show in the alert.
  * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.
+ *
+ * @part panel - the root, wrapper element
+ * @part main - wrapper around the main content
+ * @part icon - wrapper around the icon slot
+ * @part content - wrapper around all text content
+ * @part close - wrapper around the close button
+ * @part footer - wrapper around the footer slot
+ * @part overlay - present when the `alert()` method is called. The backdrop behind the modal.
  */
 export class Alert {
-    autoHideTimeout;
     panel;
     overlay;
     modal;
     originalTrigger;
     goingToHide = false;
     goingToShow = false;
+    autoHideTimeout;
+    remainingTimeInterval;
+    countdownAnimation;
+    countdownElement;
+    slotCtrl = new HasSlotController(this, '[default]', 'heading', 'title', 'footer');
     isModal = false;
     isToast = false;
     isShowing = false;
@@ -54,13 +72,19 @@ export class Alert {
     }
     /** Set to true to make the alert closable. */
     closable = false;
-    /** The color to use from the application's color palette. */
+    /**
+     * The color to use from the application's color palette.
+     * @deprecated Use `theme` instead.
+     */
     color;
+    /** The color to use from the application's color palette.  */
+    theme;
     /**
      * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the
      * alert before it closes (e.g. moves the mouse over it), the timer will restart.
      */
     duration = Infinity;
+    remainingTime = this.duration;
     handleDurationChange() {
         this.restartAutoHide();
     }
@@ -75,6 +99,11 @@ export class Alert {
             return;
         document.body.prepend(this.host);
     }
+    /**
+     * Enables a countdown that indicates the remaining time the alert will be displayed.
+     * Typically used to indicate the remaining time before a whole app refresh.
+     */
+    countdown = true;
     /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */
     nanoShow;
     /** Emitted after the alert opens and all transitions are complete. */
@@ -109,8 +138,7 @@ export class Alert {
             this.goingToShow = false;
         }
         if (this.duration < Infinity) {
-            clearTimeout(this.autoHideTimeout);
-            this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+            this.restartAutoHide();
         }
     }
     /**
@@ -128,8 +156,10 @@ export class Alert {
         }
         this.goingToHide = true;
         this.open = false;
+        blurActiveElement(this.host);
         requestAnimationFrame(() => (this.goingToHide = false));
         clearTimeout(this.autoHideTimeout);
+        clearInterval(this.remainingTimeInterval);
     }
     /**
      * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
@@ -142,6 +172,7 @@ export class Alert {
     async toast(position = 'tr') {
         this.isToast = true;
         return new Promise((resolve) => {
+            this.handleCountdownChange();
             let toastStack;
             switch (position) {
                 case 'tl':
@@ -157,7 +188,7 @@ export class Alert {
                     toastStack = toastStackTr;
                     break;
             }
-            if (!toastStack.parentElement) {
+            if (!toastStack.isConnected) {
                 document.body.appendChild(toastStack);
             }
             toastStack.appendChild(this.host);
@@ -184,8 +215,14 @@ export class Alert {
         this.isModal = true;
         this.label = label;
         return new Promise((resolve) => {
-            if (!document.body.contains(this.host)) {
-                document.body.appendChild(this.host);
+            let foundHoisted = false;
+            for (const child of document.body.children) {
+                if (child.tagName === 'NANO-ALERT' && child === this.host) {
+                    foundHoisted = true;
+                }
+            }
+            if (!foundHoisted) {
+                document.body.append(this.host);
             }
             this.modal.activate();
             lockBodyScrolling(this.host);
@@ -216,8 +253,41 @@ export class Alert {
             });
         });
     }
-    handleMouseMove = () => {
-        this.restartAutoHide();
+    handleCountdownChange() {
+        if (this.open && this.duration < Infinity && this.countdown) {
+            const start = '100%';
+            const end = '0';
+            this.countdownAnimation = this.countdownElement.animate([{ width: start }, { width: end }], {
+                duration: this.duration,
+                easing: 'linear',
+            });
+        }
+    }
+    restartAutoHide() {
+        this.handleCountdownChange();
+        clearTimeout(this.autoHideTimeout);
+        clearInterval(this.remainingTimeInterval);
+        if (this.open && this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+            this.remainingTime = this.duration;
+            this.remainingTimeInterval = window.setInterval(() => {
+                this.remainingTime -= 100;
+            }, 100);
+        }
+    }
+    handleMouseEnter = () => {
+        this.countdownAnimation?.pause();
+        clearTimeout(this.autoHideTimeout);
+        clearInterval(this.remainingTimeInterval);
+    };
+    handleMouseLeave = () => {
+        if (this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);
+            this.remainingTimeInterval = window.setInterval(() => {
+                this.remainingTime -= 100;
+            }, 100);
+            this.countdownAnimation?.play();
+        }
     };
     handleCloseClick = () => {
         this.hide();
@@ -239,12 +309,6 @@ export class Alert {
         if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')
             this.hide();
     };
-    restartAutoHide = () => {
-        clearTimeout(this.autoHideTimeout);
-        if (this.open && this.duration < Infinity) {
-            this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
-        }
-    };
     connectedCallback() {
         this.modal = new Modal(this.host);
         this.handleHoistChange();
@@ -269,21 +333,24 @@ export class Alert {
                 'alert--modal': !!this.isModal,
                 'alert--showing': this.isShowing,
                 'alert--nodismiss': this.noDismiss,
-            }, tabIndex: this.isModal ? 0 : undefined, role: this.isModal ? 'alertdialog' : 'alert', "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.isShowing ? 'false' : 'true', "aria-modal": this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "alert__content" }, h("div", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("div", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("div", { class: "alert__close" }, h("nano-icon-button", { class: "alert__close", iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), h("div", { class: "alert__footer" }, h("slot", { name: "footer" }))));
+            }, tabIndex: this.isModal ? 0 : undefined, role: this.isModal ? 'alertdialog' : 'alert', "aria-atomic": "true", "aria-hidden": this.isShowing ? 'false' : 'true', "aria-modal": this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "alert__main", part: "main" }, h("div", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("div", { part: "content", class: "alert__content", "aria-live": this.isModal ? 'assertive' : 'polite' }, this.slotCtrl.has('heading') && (h("div", { class: "alert__heading" }, h("slot", { name: "heading" }))), this.slotCtrl.has('title') && (h("div", { class: "alert__title" }, h("slot", { name: "title" }))), this.slotCtrl.has('[default]') && (h("div", { class: "alert__body" }, h("slot", null))), this.slotCtrl.has('footer') && (h("div", { part: "footer", class: "alert__footer" }, h("slot", { name: "footer" })))), this.closable && (h("div", { class: "alert__close", part: "close" }, h("nano-icon-button", { iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), this.duration < Infinity && [
+            h("div", { role: "timer", class: "alert__timer" }, this.remainingTime),
+            this.countdown ? (h("div", { class: "alert__countdown" }, h("div", { ref: (e) => (this.countdownElement = e), class: "alert__countdown-elapsed" }))) : (''),
+        ]));
     };
     render() {
-        return (h(Host, { key: '0279c18aae2396ad177089cc75566e883d90e13c', class: { ...createColorClasses(this.color), 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
-            h("div", { key: 'bf3e853b342bdd95fa760ce9318c280fc7763ac6', part: "overlay", class: {
+        return (h(Host, { key: '5e937f25c5029d3e2ec86f0d240b5f4336de9a51', class: { 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
+            h("div", { key: 'b21cc499555d44cde911efa637662363cb296c71', part: "overlay", class: {
                     alert__overlay: true,
                     'alert__overlay--open': this.open,
                 }, ref: (div) => (this.overlay = div) }),
-            h("div", { key: 'e1834c979a55eff1022d7c768d5d1f698afcfade', class: "alert__modal-wrap", onClick: (e) => {
+            h("div", { key: '6e3a1c5b34abc9324a3802927dc95a66ade63b18', class: "alert__modal-wrap", onClick: (e) => {
                     if (!e.target.classList.contains('alert__modal-wrap'))
                         return;
                     this.noDismiss = true;
                     setTimeout(() => (this.noDismiss = false), 250);
-                } }, h(this.Panel, { key: 'd30e62e22c1ea9b97b57590d9fe926bb0623b893' })),
-        ], !this.isModal && h(this.Panel, { key: 'cd72c23c11e27ea221ca7ab3327288f34cd8a597' })));
+                } }, h(this.Panel, { key: 'ca7f6ae3565e6a4249ccef33d868a166141b01e0' })),
+        ], !this.isModal && h(this.Panel, { key: 'f401f5e740a3af18c298b8ad4492b872b611a1f2' })));
     }
     static get is() { return "nano-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -301,6 +368,7 @@ export class Alert {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -315,12 +383,12 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "closable": {
                 "type": "boolean",
+                "attribute": "closable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -335,16 +403,44 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "closable",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../types/shared",
+                            "id": "src/types/shared.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `theme` instead."
+                        }],
+                    "text": "The color to use from the application's color palette."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                     "references": {
                         "Color": {
                             "location": "import",
@@ -361,11 +457,11 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": true
             },
             "duration": {
                 "type": "number",
+                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -380,12 +476,12 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "duration",
                 "reflect": false,
                 "defaultValue": "Infinity"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -400,9 +496,28 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hoist",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "countdown": {
+                "type": "boolean",
+                "attribute": "countdown",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }
@@ -412,7 +527,8 @@ export class Alert {
             "isToast": {},
             "isShowing": {},
             "label": {},
-            "noDismiss": {}
+            "noDismiss": {},
+            "remainingTime": {}
         };
     }
     static get events() {
@@ -595,4 +711,3 @@ export class Alert {
             }];
     }
 }
-//# sourceMappingURL=alert.js.map

package/dist/collection/components/algolia/algolia-data.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { openWormhole, } from "stencil-wormhole";
 export var SearchChangeEvent;
@@ -11,4 +11,3 @@ export var SearchChangeEvent;
 })(SearchChangeEvent || (SearchChangeEvent = {}));
 export const Wormhole = (Component, props) => openWormhole(Component, props);
 export * from 'stencil-wormhole';
-//# sourceMappingURL=algolia-data.js.map

package/dist/collection/components/algolia/algolia-filter.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   display: none;
 }
 :host ::slotted([slot=filter-template]) {

package/dist/collection/components/algolia/algolia-filter.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, writeTask, } from "@stencil/core";
 import { ComponentStore, } from "../../utils/store/component-store";
@@ -277,10 +277,10 @@ export class AlgoliaFilter {
             this.showFilter = true;
     }
     render() {
-        return (h(Host, { key: '81d343828cf739b8e85cab7f56fa48ad1c3fc34e', class: {
+        return (h(Host, { key: 'c1d229a764c08c92c4f25093d98bf51e1b4f6bcf', class: {
                 'show-filter': this.showFilter,
                 'nano-filter': true,
-            } }, h("div", { key: '909831f2c2e4605163227a188df31b3b130fd7d1', ref: (div) => (this.outputEle = div) }, h("slot", { key: '854cff616358aaee8cb6594db55a4a49d4322b74', name: "output" }))));
+            } }, h("div", { key: '21f66d2dcd03e19aa46face1220459dce136ccd1', ref: (div) => (this.outputEle = div) }, h("slot", { key: '3ec8e00ee477c651e48e96db7888f0a751573a3e', name: "output" }))));
     }
     static get is() { return "nano-algolia-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -298,6 +298,7 @@ export class AlgoliaFilter {
         return {
             "filterName": {
                 "type": "string",
+                "attribute": "filter-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -312,12 +313,12 @@ export class AlgoliaFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-name",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | Array<string>",
@@ -337,12 +338,12 @@ export class AlgoliaFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "operator": {
                 "type": "string",
+                "attribute": "operator",
                 "mutable": false,
                 "complexType": {
                     "original": "'or' | 'and'",
@@ -357,12 +358,12 @@ export class AlgoliaFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "operator",
                 "reflect": false,
                 "defaultValue": "'or'"
             },
             "storeId": {
                 "type": "string",
+                "attribute": "store-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -377,11 +378,11 @@ export class AlgoliaFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-id",
                 "reflect": false
             },
             "storeMethod": {
                 "type": "string",
+                "attribute": "store-method",
                 "mutable": false,
                 "complexType": {
                     "original": "StorageMethods",
@@ -402,7 +403,6 @@ export class AlgoliaFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-method",
                 "reflect": false,
                 "defaultValue": "'session'"
             }
@@ -508,4 +508,3 @@ Wormhole(AlgoliaFilter, [
     'changeEvent',
 ]);
 let filterIds = 0;
-//# sourceMappingURL=algolia-filter.js.map

package/dist/collection/components/algolia/algolia-interface.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=algolia-interface.js.map

package/dist/collection/components/algolia/algolia-pagination.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { h, Host, } from "@stencil/core";
 import { Wormhole } from "./algolia-data";
@@ -55,9 +55,9 @@ export class AlgoliaPagination {
         this.updateContent();
     }
     render() {
-        return (h(Host, { key: '12cc1de8e3bfe96c0368ff394eb6a2cfdf0344c8', class: {
+        return (h(Host, { key: '488332e371953208f90e754ebdceff321795177c', class: {
                 'show-pagination': this.show,
-            } }, h("div", { key: '70dc4683c476084346dc69246acb2092719d0b60', ref: (div) => (this.outputEle = div) }, h("slot", { key: '04f51858db37f6a25cae5fead48c5016a4159944', name: "output" }))));
+            } }, h("div", { key: '9f24519df07b4f022297a5e6f1ace601efc71e2b', ref: (div) => (this.outputEle = div) }, h("slot", { key: '363d87eb251ba2db6e6c3346e32f5dcb8b8d3a0c', name: "output" }))));
     }
     static get is() { return "nano-algolia-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +65,7 @@ export class AlgoliaPagination {
         return {
             "maxToShow": {
                 "type": "number",
+                "attribute": "max-to-show",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -79,7 +80,6 @@ export class AlgoliaPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-to-show",
                 "reflect": false,
                 "defaultValue": "null"
             }
@@ -190,4 +190,3 @@ Wormhole(AlgoliaPagination, [
     'filterChanged',
     'tplRenderFn',
 ]);
-//# sourceMappingURL=algolia-pagination.js.map

package/dist/collection/components/algolia/algolia-results.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, Build, readTask, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -199,10 +199,10 @@ export class AlgoliaResults {
         }
     }
     render() {
-        return (h(Host, { key: 'e5124d09c5619d77f6debca38bd5059ecfb9dce5', class: {
+        return (h(Host, { key: '14939adaa742d13214faf5375692737010467a7c', class: {
                 'show-results': this.showResults,
                 'nano-results': true,
-            } }, h("div", { key: '773924ac30cd4e8c57d6767f96a8c9173d6e9ec6', class: "default" }, h("slot", { key: '5a330fe6afa15143c006fc3690d1ddb0ccf3bc8d' })), h("div", { key: '3a716202a7364efa1eeb90ea525670c4da5fc7e1', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'af5860bd4dc7e2472d18f1b86175f5772bac426b', name: "start-output" }), h("slot", { key: '7b57ec404897b71f60a06ca661558624d5db1ac0', name: "result-output" }), h("div", { key: 'cff39c4ed229e1081f9160d8a447d56841209b4e', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: '79c19d45895d5f7a285e0beb640f84251d37b558', name: "end-output" }))));
+            } }, h("div", { key: '8153995d81af56df593694ca7902e93f6efb0565', class: "default" }, h("slot", { key: '60e2c4a10cdf5f6fbd609972114be5d04ccfe3f0' })), h("div", { key: 'cf589b852a52ffc84b8d9dd48c193603e733f02e', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'aad8bfb81edca4af57503bc80b4eac5cbe69a97e', name: "start-output" }), h("slot", { key: '30e848bcf8b1d0f03d57b65cb805abcca87aefd5', name: "result-output" }), h("div", { key: '8663b935facbe62a5b30d4e6446cc978083369d7', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: 'b8652a198cd7fefe5a127b8bc9387305971be922', name: "end-output" }))));
     }
     static get is() { return "nano-algolia-results"; }
     static get encapsulation() { return "shadow"; }
@@ -210,6 +210,7 @@ export class AlgoliaResults {
         return {
             "infiniteScroll": {
                 "type": "boolean",
+                "attribute": "infinite-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -224,12 +225,12 @@ export class AlgoliaResults {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "infinite-scroll",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "appendPages": {
                 "type": "boolean",
+                "attribute": "append-pages",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -244,7 +245,6 @@ export class AlgoliaResults {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "append-pages",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -344,4 +344,3 @@ Wormhole(AlgoliaResults, [
     'facets',
     'isLoading',
 ]);
-//# sourceMappingURL=algolia-results.js.map

package/dist/collection/components/algolia/algolia.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   position: relative;
   display: block;
 }