@nanoporetech-digital/components 6.1.0 → 6.2.0

package/docs-vscode.json

@@ -278,27 +278,478 @@
       ]
     },
     {
-      "name": "nano-aspect-ratio",
+      "name": "nano-animation",
       "description": {
         "kind": "markdown",
-        "value": "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."
+        "value": "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)."
       },
       "attributes": [
         {
-          "name": "aspect-ratio",
-          "description": "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."
+          "name": "current-time",
+          "description": "Gets and sets the current animation time."
         },
         {
-          "name": "fit",
-          "description": "Determines how content will be resized to fit its container.",
+          "name": "delay",
+          "description": "The number of milliseconds to delay the start of the animation."
+        },
+        {
+          "name": "direction",
+          "description": "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)",
           "values": [
             {
-              "name": "contain"
+              "name": "alternate"
+            },
+            {
+              "name": "alternate-reverse"
+            },
+            {
+              "name": "normal"
             },
             {
-              "name": "cover"
+              "name": "reverse"
             }
           ]
+        },
+        {
+          "name": "duration",
+          "description": "The number of milliseconds each iteration of the animation takes to complete."
+        },
+        {
+          "name": "easing",
+          "description": "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)`.",
+          "values": [
+            {
+              "name": "linear"
+            },
+            {
+              "name": "ease"
+            },
+            {
+              "name": "easeIn"
+            },
+            {
+              "name": "easeOut"
+            },
+            {
+              "name": "easeInOut"
+            },
+            {
+              "name": "easeInSine"
+            },
+            {
+              "name": "easeOutSine"
+            },
+            {
+              "name": "easeInOutSine"
+            },
+            {
+              "name": "easeInQuad"
+            },
+            {
+              "name": "easeOutQuad"
+            },
+            {
+              "name": "easeInOutQuad"
+            },
+            {
+              "name": "easeInCubic"
+            },
+            {
+              "name": "easeOutCubic"
+            },
+            {
+              "name": "easeInOutCubic"
+            },
+            {
+              "name": "easeInQuart"
+            },
+            {
+              "name": "easeOutQuart"
+            },
+            {
+              "name": "easeInOutQuart"
+            },
+            {
+              "name": "easeInQuint"
+            },
+            {
+              "name": "easeOutQuint"
+            },
+            {
+              "name": "easeInOutQuint"
+            },
+            {
+              "name": "easeInExpo"
+            },
+            {
+              "name": "easeOutExpo"
+            },
+            {
+              "name": "easeInOutExpo"
+            },
+            {
+              "name": "easeInCirc"
+            },
+            {
+              "name": "easeOutCirc"
+            },
+            {
+              "name": "easeInOutCirc"
+            },
+            {
+              "name": "easeInBack"
+            },
+            {
+              "name": "easeOutBack"
+            },
+            {
+              "name": "easeInOutBack"
+            }
+          ]
+        },
+        {
+          "name": "end-delay",
+          "description": "The number of milliseconds to delay after the active period of an animation sequence."
+        },
+        {
+          "name": "fill",
+          "description": "Sets how the animation applies styles to its target before and after its execution.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "backwards"
+            },
+            {
+              "name": "both"
+            },
+            {
+              "name": "forwards"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "iteration-start",
+          "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end)."
+        },
+        {
+          "name": "iterations",
+          "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops."
+        },
+        {
+          "name": "name",
+          "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+          "values": [
+            {
+              "name": "flip"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "bounce"
+            },
+            {
+              "name": "flash"
+            },
+            {
+              "name": "headShake"
+            },
+            {
+              "name": "heartBeat"
+            },
+            {
+              "name": "jello"
+            },
+            {
+              "name": "pulse"
+            },
+            {
+              "name": "rubberBand"
+            },
+            {
+              "name": "shake"
+            },
+            {
+              "name": "shakeX"
+            },
+            {
+              "name": "shakeY"
+            },
+            {
+              "name": "swing"
+            },
+            {
+              "name": "tada"
+            },
+            {
+              "name": "wobble"
+            },
+            {
+              "name": "backInDown"
+            },
+            {
+              "name": "backInLeft"
+            },
+            {
+              "name": "backInRight"
+            },
+            {
+              "name": "backInUp"
+            },
+            {
+              "name": "backOutDown"
+            },
+            {
+              "name": "backOutLeft"
+            },
+            {
+              "name": "backOutRight"
+            },
+            {
+              "name": "backOutUp"
+            },
+            {
+              "name": "bounceIn"
+            },
+            {
+              "name": "bounceInDown"
+            },
+            {
+              "name": "bounceInLeft"
+            },
+            {
+              "name": "bounceInRight"
+            },
+            {
+              "name": "bounceInUp"
+            },
+            {
+              "name": "bounceOut"
+            },
+            {
+              "name": "bounceOutDown"
+            },
+            {
+              "name": "bounceOutLeft"
+            },
+            {
+              "name": "bounceOutRight"
+            },
+            {
+              "name": "bounceOutUp"
+            },
+            {
+              "name": "fadeIn"
+            },
+            {
+              "name": "fadeInBottomLeft"
+            },
+            {
+              "name": "fadeInBottomRight"
+            },
+            {
+              "name": "fadeInDown"
+            },
+            {
+              "name": "fadeInDownBig"
+            },
+            {
+              "name": "fadeInLeft"
+            },
+            {
+              "name": "fadeInLeftBig"
+            },
+            {
+              "name": "fadeInRight"
+            },
+            {
+              "name": "fadeInRightBig"
+            },
+            {
+              "name": "fadeInTopLeft"
+            },
+            {
+              "name": "fadeInTopRight"
+            },
+            {
+              "name": "fadeInUp"
+            },
+            {
+              "name": "fadeInUpBig"
+            },
+            {
+              "name": "fadeOut"
+            },
+            {
+              "name": "fadeOutBottomLeft"
+            },
+            {
+              "name": "fadeOutBottomRight"
+            },
+            {
+              "name": "fadeOutDown"
+            },
+            {
+              "name": "fadeOutDownBig"
+            },
+            {
+              "name": "fadeOutLeft"
+            },
+            {
+              "name": "fadeOutLeftBig"
+            },
+            {
+              "name": "fadeOutRight"
+            },
+            {
+              "name": "fadeOutRightBig"
+            },
+            {
+              "name": "fadeOutTopLeft"
+            },
+            {
+              "name": "fadeOutTopRight"
+            },
+            {
+              "name": "fadeOutUp"
+            },
+            {
+              "name": "fadeOutUpBig"
+            },
+            {
+              "name": "flipInX"
+            },
+            {
+              "name": "flipInY"
+            },
+            {
+              "name": "flipOutX"
+            },
+            {
+              "name": "flipOutY"
+            },
+            {
+              "name": "lightSpeedInLeft"
+            },
+            {
+              "name": "lightSpeedInRight"
+            },
+            {
+              "name": "lightSpeedOutLeft"
+            },
+            {
+              "name": "lightSpeedOutRight"
+            },
+            {
+              "name": "rotateIn"
+            },
+            {
+              "name": "rotateInDownLeft"
+            },
+            {
+              "name": "rotateInDownRight"
+            },
+            {
+              "name": "rotateInUpLeft"
+            },
+            {
+              "name": "rotateInUpRight"
+            },
+            {
+              "name": "rotateOut"
+            },
+            {
+              "name": "rotateOutDownLeft"
+            },
+            {
+              "name": "rotateOutDownRight"
+            },
+            {
+              "name": "rotateOutUpLeft"
+            },
+            {
+              "name": "rotateOutUpRight"
+            },
+            {
+              "name": "slideInDown"
+            },
+            {
+              "name": "slideInLeft"
+            },
+            {
+              "name": "slideInRight"
+            },
+            {
+              "name": "slideInUp"
+            },
+            {
+              "name": "slideOutDown"
+            },
+            {
+              "name": "slideOutLeft"
+            },
+            {
+              "name": "slideOutRight"
+            },
+            {
+              "name": "slideOutUp"
+            },
+            {
+              "name": "hinge"
+            },
+            {
+              "name": "jackInTheBox"
+            },
+            {
+              "name": "rollIn"
+            },
+            {
+              "name": "rollOut"
+            },
+            {
+              "name": "zoomIn"
+            },
+            {
+              "name": "zoomInDown"
+            },
+            {
+              "name": "zoomInLeft"
+            },
+            {
+              "name": "zoomInRight"
+            },
+            {
+              "name": "zoomInUp"
+            },
+            {
+              "name": "zoomOut"
+            },
+            {
+              "name": "zoomOutDown"
+            },
+            {
+              "name": "zoomOutLeft"
+            },
+            {
+              "name": "zoomOutRight"
+            },
+            {
+              "name": "zoomOutUp"
+            }
+          ]
+        },
+        {
+          "name": "play",
+          "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled."
+        },
+        {
+          "name": "playback-rate",
+          "description": "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."
         }
       ]
     },
@@ -1870,6 +2321,35 @@
         }
       ]
     },
+    {
+      "name": "nano-intersection-observe",
+      "description": {
+        "kind": "markdown",
+        "value": "A thin, declarative interface to the IntersectionObserver API."
+      },
+      "attributes": [
+        {
+          "name": "root",
+          "description": "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`.",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "root"
+            }
+          ]
+        },
+        {
+          "name": "root-margin",
+          "description": "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."
+        },
+        {
+          "name": "threshold",
+          "description": "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."
+        }
+      ]
+    },
     {
       "name": "nano-menu",
       "description": {