@nanoporetech-digital/components 6.0.1 → 6.2.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-04-11T17:02:26",
+  "timestamp": "2024-05-03T10:38:32",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.2",
@@ -847,7 +847,7 @@
         },
         {
           "event": "nanoResultsShown",
-          "detail": "IndexResult",
+          "detail": "{ meta: IndexResult; client: { apiKey: string; appId: string; }; }",
           "bubbles": false,
           "cancelable": true,
           "composed": true,
@@ -1221,19 +1221,868 @@
           "text": "end-template - Template string (format from nano-algolia 'tplEngine' property)."
         },
         {
-          "name": "slot",
-          "text": "end-output - A placeholder for template output."
-        }
-      ],
-      "usage": {},
-      "props": [
-        {
-          "name": "appendPages",
+          "name": "slot",
+          "text": "end-output - A placeholder for template output."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "appendPages",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "append-pages",
+          "reflectToAttr": false,
+          "docs": "Whether new pages loaded by pagination will replace or be appended to the results block\n(this will be ignored if 'infiniteScroll' is set to true)",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "infiniteScroll",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "infinite-scroll",
+          "reflectToAttr": false,
+          "docs": "Load and append pages automatically on scroll",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "nanoPageChanged",
+          "detail": "PageChangeEventDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the page number changes",
+          "docsTags": []
+        },
+        {
+          "event": "nanoTplUpdated",
+          "detail": "HTMLNanoAlgoliaResultsElement",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when templates are updated",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "end-output",
+          "docs": "A placeholder for template output."
+        },
+        {
+          "name": "end-template",
+          "docs": "Template string (format from nano-algolia 'tplEngine' property)."
+        },
+        {
+          "name": "result-output",
+          "docs": "A placeholder for template output."
+        },
+        {
+          "name": "result-template",
+          "docs": "Template string (format from nano-algolia 'tplEngine' property)."
+        },
+        {
+          "name": "start-output",
+          "docs": "A placeholder for template output."
+        },
+        {
+          "name": "start-template",
+          "docs": "Template string (format from nano-algolia 'tplEngine' property)."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/animation/animation.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-animation",
+      "readme": "# nano-animation\n\n\n",
+      "docs": "Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.\nPowered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "currentTime",
+          "type": "number",
+          "mutable": false,
+          "attr": "current-time",
+          "reflectToAttr": false,
+          "docs": "Gets and sets the current animation time.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": true
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "mutable": false,
+          "attr": "delay",
+          "reflectToAttr": false,
+          "docs": "The number of milliseconds to delay the start of the animation.",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "direction",
+          "type": "\"alternate\" | \"alternate-reverse\" | \"normal\" | \"reverse\"",
+          "mutable": false,
+          "attr": "direction",
+          "reflectToAttr": false,
+          "docs": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
+          "docsTags": [],
+          "default": "'normal'",
+          "values": [
+            {
+              "value": "alternate",
+              "type": "string"
+            },
+            {
+              "value": "alternate-reverse",
+              "type": "string"
+            },
+            {
+              "value": "normal",
+              "type": "string"
+            },
+            {
+              "value": "reverse",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "duration",
+          "type": "number",
+          "mutable": false,
+          "attr": "duration",
+          "reflectToAttr": false,
+          "docs": "The number of milliseconds each iteration of the animation takes to complete.",
+          "docsTags": [],
+          "default": "1000",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "easing",
+          "type": "\"linear\" | \"ease\" | \"easeIn\" | \"easeOut\" | \"easeInOut\" | \"easeInSine\" | \"easeOutSine\" | \"easeInOutSine\" | \"easeInQuad\" | \"easeOutQuad\" | \"easeInOutQuad\" | \"easeInCubic\" | \"easeOutCubic\" | \"easeInOutCubic\" | \"easeInQuart\" | \"easeOutQuart\" | \"easeInOutQuart\" | \"easeInQuint\" | \"easeOutQuint\" | \"easeInOutQuint\" | \"easeInExpo\" | \"easeOutExpo\" | \"easeInOutExpo\" | \"easeInCirc\" | \"easeOutCirc\" | \"easeInOutCirc\" | \"easeInBack\" | \"easeOutBack\" | \"easeInOutBack\"",
+          "mutable": false,
+          "attr": "easing",
+          "reflectToAttr": false,
+          "docs": "The easing function to use for the animation. This can be a easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+          "docsTags": [],
+          "default": "'ease'",
+          "values": [
+            {
+              "value": "linear",
+              "type": "string"
+            },
+            {
+              "value": "ease",
+              "type": "string"
+            },
+            {
+              "value": "easeIn",
+              "type": "string"
+            },
+            {
+              "value": "easeOut",
+              "type": "string"
+            },
+            {
+              "value": "easeInOut",
+              "type": "string"
+            },
+            {
+              "value": "easeInSine",
+              "type": "string"
+            },
+            {
+              "value": "easeOutSine",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutSine",
+              "type": "string"
+            },
+            {
+              "value": "easeInQuad",
+              "type": "string"
+            },
+            {
+              "value": "easeOutQuad",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutQuad",
+              "type": "string"
+            },
+            {
+              "value": "easeInCubic",
+              "type": "string"
+            },
+            {
+              "value": "easeOutCubic",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutCubic",
+              "type": "string"
+            },
+            {
+              "value": "easeInQuart",
+              "type": "string"
+            },
+            {
+              "value": "easeOutQuart",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutQuart",
+              "type": "string"
+            },
+            {
+              "value": "easeInQuint",
+              "type": "string"
+            },
+            {
+              "value": "easeOutQuint",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutQuint",
+              "type": "string"
+            },
+            {
+              "value": "easeInExpo",
+              "type": "string"
+            },
+            {
+              "value": "easeOutExpo",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutExpo",
+              "type": "string"
+            },
+            {
+              "value": "easeInCirc",
+              "type": "string"
+            },
+            {
+              "value": "easeOutCirc",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutCirc",
+              "type": "string"
+            },
+            {
+              "value": "easeInBack",
+              "type": "string"
+            },
+            {
+              "value": "easeOutBack",
+              "type": "string"
+            },
+            {
+              "value": "easeInOutBack",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "endDelay",
+          "type": "number",
+          "mutable": false,
+          "attr": "end-delay",
+          "reflectToAttr": false,
+          "docs": "The number of milliseconds to delay after the active period of an animation sequence.",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "fill",
+          "type": "\"auto\" | \"backwards\" | \"both\" | \"forwards\" | \"none\"",
+          "mutable": false,
+          "attr": "fill",
+          "reflectToAttr": false,
+          "docs": "Sets how the animation applies styles to its target before and after its execution.",
+          "docsTags": [],
+          "default": "'auto'",
+          "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "value": "backwards",
+              "type": "string"
+            },
+            {
+              "value": "both",
+              "type": "string"
+            },
+            {
+              "value": "forwards",
+              "type": "string"
+            },
+            {
+              "value": "none",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "iterationStart",
+          "type": "number",
+          "mutable": false,
+          "attr": "iteration-start",
+          "reflectToAttr": false,
+          "docs": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "iterations",
+          "type": "number",
+          "mutable": false,
+          "attr": "iterations",
+          "reflectToAttr": false,
+          "docs": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+          "docsTags": [],
+          "default": "Infinity",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "keyframes",
+          "type": "Keyframe[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The keyframes to use for the animation. If this is set, `name` will be ignored.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "Keyframe[]"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "name",
+          "type": "\"flip\" | \"none\" | \"bounce\" | \"flash\" | \"headShake\" | \"heartBeat\" | \"jello\" | \"pulse\" | \"rubberBand\" | \"shake\" | \"shakeX\" | \"shakeY\" | \"swing\" | \"tada\" | \"wobble\" | \"backInDown\" | \"backInLeft\" | \"backInRight\" | \"backInUp\" | \"backOutDown\" | \"backOutLeft\" | \"backOutRight\" | \"backOutUp\" | \"bounceIn\" | \"bounceInDown\" | \"bounceInLeft\" | \"bounceInRight\" | \"bounceInUp\" | \"bounceOut\" | \"bounceOutDown\" | \"bounceOutLeft\" | \"bounceOutRight\" | \"bounceOutUp\" | \"fadeIn\" | \"fadeInBottomLeft\" | \"fadeInBottomRight\" | \"fadeInDown\" | \"fadeInDownBig\" | \"fadeInLeft\" | \"fadeInLeftBig\" | \"fadeInRight\" | \"fadeInRightBig\" | \"fadeInTopLeft\" | \"fadeInTopRight\" | \"fadeInUp\" | \"fadeInUpBig\" | \"fadeOut\" | \"fadeOutBottomLeft\" | \"fadeOutBottomRight\" | \"fadeOutDown\" | \"fadeOutDownBig\" | \"fadeOutLeft\" | \"fadeOutLeftBig\" | \"fadeOutRight\" | \"fadeOutRightBig\" | \"fadeOutTopLeft\" | \"fadeOutTopRight\" | \"fadeOutUp\" | \"fadeOutUpBig\" | \"flipInX\" | \"flipInY\" | \"flipOutX\" | \"flipOutY\" | \"lightSpeedInLeft\" | \"lightSpeedInRight\" | \"lightSpeedOutLeft\" | \"lightSpeedOutRight\" | \"rotateIn\" | \"rotateInDownLeft\" | \"rotateInDownRight\" | \"rotateInUpLeft\" | \"rotateInUpRight\" | \"rotateOut\" | \"rotateOutDownLeft\" | \"rotateOutDownRight\" | \"rotateOutUpLeft\" | \"rotateOutUpRight\" | \"slideInDown\" | \"slideInLeft\" | \"slideInRight\" | \"slideInUp\" | \"slideOutDown\" | \"slideOutLeft\" | \"slideOutRight\" | \"slideOutUp\" | \"hinge\" | \"jackInTheBox\" | \"rollIn\" | \"rollOut\" | \"zoomIn\" | \"zoomInDown\" | \"zoomInLeft\" | \"zoomInRight\" | \"zoomInUp\" | \"zoomOut\" | \"zoomOutDown\" | \"zoomOutLeft\" | \"zoomOutRight\" | \"zoomOutUp\"",
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+          "docsTags": [],
+          "default": "'none'",
+          "values": [
+            {
+              "value": "flip",
+              "type": "string"
+            },
+            {
+              "value": "none",
+              "type": "string"
+            },
+            {
+              "value": "bounce",
+              "type": "string"
+            },
+            {
+              "value": "flash",
+              "type": "string"
+            },
+            {
+              "value": "headShake",
+              "type": "string"
+            },
+            {
+              "value": "heartBeat",
+              "type": "string"
+            },
+            {
+              "value": "jello",
+              "type": "string"
+            },
+            {
+              "value": "pulse",
+              "type": "string"
+            },
+            {
+              "value": "rubberBand",
+              "type": "string"
+            },
+            {
+              "value": "shake",
+              "type": "string"
+            },
+            {
+              "value": "shakeX",
+              "type": "string"
+            },
+            {
+              "value": "shakeY",
+              "type": "string"
+            },
+            {
+              "value": "swing",
+              "type": "string"
+            },
+            {
+              "value": "tada",
+              "type": "string"
+            },
+            {
+              "value": "wobble",
+              "type": "string"
+            },
+            {
+              "value": "backInDown",
+              "type": "string"
+            },
+            {
+              "value": "backInLeft",
+              "type": "string"
+            },
+            {
+              "value": "backInRight",
+              "type": "string"
+            },
+            {
+              "value": "backInUp",
+              "type": "string"
+            },
+            {
+              "value": "backOutDown",
+              "type": "string"
+            },
+            {
+              "value": "backOutLeft",
+              "type": "string"
+            },
+            {
+              "value": "backOutRight",
+              "type": "string"
+            },
+            {
+              "value": "backOutUp",
+              "type": "string"
+            },
+            {
+              "value": "bounceIn",
+              "type": "string"
+            },
+            {
+              "value": "bounceInDown",
+              "type": "string"
+            },
+            {
+              "value": "bounceInLeft",
+              "type": "string"
+            },
+            {
+              "value": "bounceInRight",
+              "type": "string"
+            },
+            {
+              "value": "bounceInUp",
+              "type": "string"
+            },
+            {
+              "value": "bounceOut",
+              "type": "string"
+            },
+            {
+              "value": "bounceOutDown",
+              "type": "string"
+            },
+            {
+              "value": "bounceOutLeft",
+              "type": "string"
+            },
+            {
+              "value": "bounceOutRight",
+              "type": "string"
+            },
+            {
+              "value": "bounceOutUp",
+              "type": "string"
+            },
+            {
+              "value": "fadeIn",
+              "type": "string"
+            },
+            {
+              "value": "fadeInBottomLeft",
+              "type": "string"
+            },
+            {
+              "value": "fadeInBottomRight",
+              "type": "string"
+            },
+            {
+              "value": "fadeInDown",
+              "type": "string"
+            },
+            {
+              "value": "fadeInDownBig",
+              "type": "string"
+            },
+            {
+              "value": "fadeInLeft",
+              "type": "string"
+            },
+            {
+              "value": "fadeInLeftBig",
+              "type": "string"
+            },
+            {
+              "value": "fadeInRight",
+              "type": "string"
+            },
+            {
+              "value": "fadeInRightBig",
+              "type": "string"
+            },
+            {
+              "value": "fadeInTopLeft",
+              "type": "string"
+            },
+            {
+              "value": "fadeInTopRight",
+              "type": "string"
+            },
+            {
+              "value": "fadeInUp",
+              "type": "string"
+            },
+            {
+              "value": "fadeInUpBig",
+              "type": "string"
+            },
+            {
+              "value": "fadeOut",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutBottomLeft",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutBottomRight",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutDown",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutDownBig",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutLeft",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutLeftBig",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutRight",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutRightBig",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutTopLeft",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutTopRight",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutUp",
+              "type": "string"
+            },
+            {
+              "value": "fadeOutUpBig",
+              "type": "string"
+            },
+            {
+              "value": "flipInX",
+              "type": "string"
+            },
+            {
+              "value": "flipInY",
+              "type": "string"
+            },
+            {
+              "value": "flipOutX",
+              "type": "string"
+            },
+            {
+              "value": "flipOutY",
+              "type": "string"
+            },
+            {
+              "value": "lightSpeedInLeft",
+              "type": "string"
+            },
+            {
+              "value": "lightSpeedInRight",
+              "type": "string"
+            },
+            {
+              "value": "lightSpeedOutLeft",
+              "type": "string"
+            },
+            {
+              "value": "lightSpeedOutRight",
+              "type": "string"
+            },
+            {
+              "value": "rotateIn",
+              "type": "string"
+            },
+            {
+              "value": "rotateInDownLeft",
+              "type": "string"
+            },
+            {
+              "value": "rotateInDownRight",
+              "type": "string"
+            },
+            {
+              "value": "rotateInUpLeft",
+              "type": "string"
+            },
+            {
+              "value": "rotateInUpRight",
+              "type": "string"
+            },
+            {
+              "value": "rotateOut",
+              "type": "string"
+            },
+            {
+              "value": "rotateOutDownLeft",
+              "type": "string"
+            },
+            {
+              "value": "rotateOutDownRight",
+              "type": "string"
+            },
+            {
+              "value": "rotateOutUpLeft",
+              "type": "string"
+            },
+            {
+              "value": "rotateOutUpRight",
+              "type": "string"
+            },
+            {
+              "value": "slideInDown",
+              "type": "string"
+            },
+            {
+              "value": "slideInLeft",
+              "type": "string"
+            },
+            {
+              "value": "slideInRight",
+              "type": "string"
+            },
+            {
+              "value": "slideInUp",
+              "type": "string"
+            },
+            {
+              "value": "slideOutDown",
+              "type": "string"
+            },
+            {
+              "value": "slideOutLeft",
+              "type": "string"
+            },
+            {
+              "value": "slideOutRight",
+              "type": "string"
+            },
+            {
+              "value": "slideOutUp",
+              "type": "string"
+            },
+            {
+              "value": "hinge",
+              "type": "string"
+            },
+            {
+              "value": "jackInTheBox",
+              "type": "string"
+            },
+            {
+              "value": "rollIn",
+              "type": "string"
+            },
+            {
+              "value": "rollOut",
+              "type": "string"
+            },
+            {
+              "value": "zoomIn",
+              "type": "string"
+            },
+            {
+              "value": "zoomInDown",
+              "type": "string"
+            },
+            {
+              "value": "zoomInLeft",
+              "type": "string"
+            },
+            {
+              "value": "zoomInRight",
+              "type": "string"
+            },
+            {
+              "value": "zoomInUp",
+              "type": "string"
+            },
+            {
+              "value": "zoomOut",
+              "type": "string"
+            },
+            {
+              "value": "zoomOutDown",
+              "type": "string"
+            },
+            {
+              "value": "zoomOutLeft",
+              "type": "string"
+            },
+            {
+              "value": "zoomOutRight",
+              "type": "string"
+            },
+            {
+              "value": "zoomOutUp",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "play",
           "type": "boolean",
-          "mutable": false,
-          "attr": "append-pages",
-          "reflectToAttr": false,
-          "docs": "Whether new pages loaded by pagination will replace or be appended to the results block\n(this will be ignored if 'infiniteScroll' is set to true)",
+          "mutable": true,
+          "attr": "play",
+          "reflectToAttr": true,
+          "docs": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -1247,17 +2096,17 @@
           "setter": false
         },
         {
-          "name": "infiniteScroll",
-          "type": "boolean",
+          "name": "playbackRate",
+          "type": "number",
           "mutable": false,
-          "attr": "infinite-scroll",
+          "attr": "playback-rate",
           "reflectToAttr": false,
-          "docs": "Load and append pages automatically on scroll",
+          "docs": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
           "docsTags": [],
-          "default": "false",
+          "default": "1",
           "values": [
             {
-              "type": "boolean"
+              "type": "number"
             }
           ],
           "optional": false,
@@ -1266,124 +2115,68 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "cancel",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "cancel() => Promise<void>",
+          "parameters": [],
+          "docs": "Clears all keyframe effects caused by this animation and aborts its playback.",
+          "docsTags": []
+        },
+        {
+          "name": "finish",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "finish() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets the playback time to the end of the animation corresponding to the current playback direction.",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
-          "event": "nanoPageChanged",
-          "detail": "PageChangeEventDetail",
+          "event": "nanoCancel",
+          "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the page number changes",
+          "docs": "Emitted when the animation is canceled.",
           "docsTags": []
         },
         {
-          "event": "nanoTplUpdated",
-          "detail": "HTMLNanoAlgoliaResultsElement",
+          "event": "nanoFinish",
+          "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when templates are updated",
+          "docs": "Emitted when the animation finishes.",
           "docsTags": []
-        }
-      ],
-      "listeners": [],
-      "styles": [],
-      "slots": [
-        {
-          "name": "end-output",
-          "docs": "A placeholder for template output."
-        },
-        {
-          "name": "end-template",
-          "docs": "Template string (format from nano-algolia 'tplEngine' property)."
-        },
-        {
-          "name": "result-output",
-          "docs": "A placeholder for template output."
-        },
-        {
-          "name": "result-template",
-          "docs": "Template string (format from nano-algolia 'tplEngine' property)."
-        },
-        {
-          "name": "start-output",
-          "docs": "A placeholder for template output."
-        },
-        {
-          "name": "start-template",
-          "docs": "Template string (format from nano-algolia 'tplEngine' property)."
-        }
-      ],
-      "parts": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
-    {
-      "filePath": "./src/components/aspect-ratio/aspect-ratio.tsx",
-      "encapsulation": "shadow",
-      "tag": "nano-aspect-ratio",
-      "readme": "# nano-aspect-ratio\n\n\n",
-      "docs": "Displays media in the desired aspect ratio.\nYou can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\nAs the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\nThe default aspect ratio is 16:9.",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "aspectRatio",
-          "type": "string",
-          "mutable": false,
-          "attr": "aspect-ratio",
-          "reflectToAttr": false,
-          "docs": "The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\nRatios not in this format will be ignored.",
-          "docsTags": [],
-          "default": "'16:9'",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
         },
         {
-          "name": "fit",
-          "type": "\"contain\" | \"cover\"",
-          "mutable": false,
-          "attr": "fit",
-          "reflectToAttr": false,
-          "docs": "Determines how content will be resized to fit its container.",
-          "docsTags": [],
-          "default": "'cover'",
-          "values": [
-            {
-              "value": "contain",
-              "type": "string"
-            },
-            {
-              "value": "cover",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
+          "event": "nanoStart",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the animation starts.",
+          "docsTags": []
         }
       ],
-      "methods": [],
-      "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [],
-      "parts": [
+      "slots": [
         {
-          "name": "base",
-          "docs": ""
+          "name": "",
+          "docs": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements."
         }
       ],
+      "parts": [],
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}
@@ -10064,6 +10857,127 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/intersection-observe/intersection-observe.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-intersection-observe",
+      "readme": "# nano-intersection-observe\n\n\n",
+      "docs": "A thin, declarative interface to the IntersectionObserver API.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Main slot for any content."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "root",
+          "type": "\"auto\" | \"root\" | Element",
+          "mutable": false,
+          "attr": "root",
+          "reflectToAttr": false,
+          "docs": "The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.\nDefaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`.",
+          "docsTags": [],
+          "default": "'auto'",
+          "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "value": "root",
+              "type": "string"
+            },
+            {
+              "type": "Element"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "rootMargin",
+          "type": "string",
+          "mutable": false,
+          "attr": "root-margin",
+          "reflectToAttr": false,
+          "docs": "Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\nThe values can be percentages. This set of values serves to grow or shrink each side of the root element's\nbounding box before computing intersections. Defaults to zeros.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "threshold",
+          "type": "string",
+          "mutable": false,
+          "attr": "threshold",
+          "reflectToAttr": false,
+          "docs": "Indicate at what percentage of the target's visibility the observer's callback should be executed.\nIf you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\nIf you want the callback to run every time visibility passes another '25%',\nyou would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\nA value of '1.0' means that the threshold isn't considered passed until every pixel is visible.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "nanoIntersecting",
+          "detail": "IntersectionObserverEntry",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "A resize break point is switched on or off",
+          "docsTags": []
+        },
+        {
+          "event": "nanoIntersectionChange",
+          "detail": "IntersectionObserverEntry",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "A resize break point is switched on or off",
+          "docsTags": []
+        },
+        {
+          "event": "nanoNotIntersecting",
+          "detail": "IntersectionObserverEntry",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "A resize break point is switched on or off",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Main slot for any content."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "./src/components/menu/menu.tsx",
       "encapsulation": "shadow",