@nanoporetech-digital/components 8.0.0-alpha.3 → 8.0.0-alpha.5

package/dist/types/components/option/option.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { OptionInterface } from './option-interface';
 /**
- * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+ * Selectable items for use within [select](/components/select) and [datalist](/components/datalist).
+ *
+ * @version 2.0.0
+ * @status stable
  *
  * @slot - main label. Defaults to `label` or `value` prop
  * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check

package/dist/types/components/slides/slide.d.ts

@@ -1,4 +1,12 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+/**
+ * An item to display within [slides](/components/slides).
+ *
+ * @version 1.0.0
+ * @status stable
+ *
+ * @slot - main content of the slide
+ */
 export declare class Slide implements ComponentInterface {
     /**
      * Fired when the slide has loaded.

package/dist/types/components/spinner/spinner.d.ts

@@ -4,16 +4,12 @@ import { ComponentInterface } from '../../stencil-public-runtime';
  *
  * @version 1.0.0
  * @status stable
+ * @type CSS Only
  *
- * @slot - Used for loading messages
+ * @slot - Used for loading messages that should scale with current spinner / font size.
+ * @slot label - Used for loading messages that should not scale with spinner / font size.
  */
 export declare class Spinner implements ComponentInterface {
-    el: HTMLNanoSpinnerElement;
-    hasText: boolean;
-    /** The type of spinner animation */
-    type: 'dna' | 'circle';
     /** Displays absolutely with an overlay */
     overlay: boolean;
-    componentWillLoad(): void;
-    render(): any;
 }

package/dist/types/components.d.ts

@@ -2360,7 +2360,9 @@ export namespace Components {
         "target": '_self' | '_blank' | '_parent' | '_top';
     }
     /**
-     * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+     * Selectable items for use within [select](/components/select) and [datalist](/components/datalist).
+     * @version 2.0.0
+     * @status stable
      */
     interface NanoOption {
         /**
@@ -2701,17 +2703,10 @@ export namespace Components {
         "valueTagTemplate": (option: OptionInterface, index: number) => string;
     }
     /**
-     * Skeletons are used to show where content will eventually be drawn.
+     * An item to display within [slides](/components/slides).
      * @version 1.0.0
      * @status stable
      */
-    interface NanoSkeleton {
-        /**
-          * When `true`, the skeleton will animate.
-          * @default true
-         */
-        "animated": boolean;
-    }
     interface NanoSlide {
         /**
           * Used to to inform the parent slides components of readiness. This will automatically be set to true when the slide has loaded but can be set and updated manually.
@@ -2949,6 +2944,7 @@ export namespace Components {
      * Spinners are used to show the progress of an indeterminate operation.
      * @version 1.0.0
      * @status stable
+     * @type CSS Only
      */
     interface NanoSpinner {
         /**
@@ -2956,11 +2952,6 @@ export namespace Components {
           * @default false
          */
         "overlay": boolean;
-        /**
-          * The type of spinner animation
-          * @default 'circle'
-         */
-        "type": 'dna' | 'circle';
     }
     /**
      * Split panes display two adjacent panels, allowing the user to reposition them.
@@ -4361,7 +4352,9 @@ declare global {
         "nanoSelect": HTMLNanoOptionElement;
     }
     /**
-     * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+     * Selectable items for use within [select](/components/select) and [datalist](/components/datalist).
+     * @version 2.0.0
+     * @status stable
      */
     interface HTMLNanoOptionElement extends Components.NanoOption, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNanoOptionElementEventMap>(type: K, listener: (this: HTMLNanoOptionElement, ev: NanoOptionCustomEvent<HTMLNanoOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4490,20 +4483,14 @@ declare global {
         prototype: HTMLNanoSelectElement;
         new (): HTMLNanoSelectElement;
     };
+    interface HTMLNanoSlideElementEventMap {
+        "nanoSlideReady": void;
+    }
     /**
-     * Skeletons are used to show where content will eventually be drawn.
+     * An item to display within [slides](/components/slides).
      * @version 1.0.0
      * @status stable
      */
-    interface HTMLNanoSkeletonElement extends Components.NanoSkeleton, HTMLStencilElement {
-    }
-    var HTMLNanoSkeletonElement: {
-        prototype: HTMLNanoSkeletonElement;
-        new (): HTMLNanoSkeletonElement;
-    };
-    interface HTMLNanoSlideElementEventMap {
-        "nanoSlideReady": void;
-    }
     interface HTMLNanoSlideElement extends Components.NanoSlide, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNanoSlideElementEventMap>(type: K, listener: (this: HTMLNanoSlideElement, ev: NanoSlideCustomEvent<HTMLNanoSlideElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4582,6 +4569,7 @@ declare global {
      * Spinners are used to show the progress of an indeterminate operation.
      * @version 1.0.0
      * @status stable
+     * @type CSS Only
      */
     interface HTMLNanoSpinnerElement extends Components.NanoSpinner, HTMLStencilElement {
     }
@@ -4806,7 +4794,6 @@ declare global {
         "nano-rating": HTMLNanoRatingElement;
         "nano-resize-observe": HTMLNanoResizeObserveElement;
         "nano-select": HTMLNanoSelectElement;
-        "nano-skeleton": HTMLNanoSkeletonElement;
         "nano-slide": HTMLNanoSlideElement;
         "nano-slides": HTMLNanoSlidesElement;
         "nano-sortable": HTMLNanoSortableElement;
@@ -7227,7 +7214,9 @@ declare namespace LocalJSX {
         "target"?: '_self' | '_blank' | '_parent' | '_top';
     }
     /**
-     * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+     * Selectable items for use within [select](/components/select) and [datalist](/components/datalist).
+     * @version 2.0.0
+     * @status stable
      */
     interface NanoOption {
         /**
@@ -7610,17 +7599,10 @@ declare namespace LocalJSX {
         "valueTagTemplate"?: (option: OptionInterface, index: number) => string;
     }
     /**
-     * Skeletons are used to show where content will eventually be drawn.
+     * An item to display within [slides](/components/slides).
      * @version 1.0.0
      * @status stable
      */
-    interface NanoSkeleton {
-        /**
-          * When `true`, the skeleton will animate.
-          * @default true
-         */
-        "animated"?: boolean;
-    }
     interface NanoSlide {
         /**
           * Fired when the slide has loaded.
@@ -7849,6 +7831,7 @@ declare namespace LocalJSX {
      * Spinners are used to show the progress of an indeterminate operation.
      * @version 1.0.0
      * @status stable
+     * @type CSS Only
      */
     interface NanoSpinner {
         /**
@@ -7856,11 +7839,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "overlay"?: boolean;
-        /**
-          * The type of spinner animation
-          * @default 'circle'
-         */
-        "type"?: 'dna' | 'circle';
     }
     /**
      * Split panes display two adjacent panels, allowing the user to reposition them.
@@ -8257,7 +8235,6 @@ declare namespace LocalJSX {
         "nano-rating": NanoRating;
         "nano-resize-observe": NanoResizeObserve;
         "nano-select": NanoSelect;
-        "nano-skeleton": NanoSkeleton;
         "nano-slide": NanoSlide;
         "nano-slides": NanoSlides;
         "nano-sortable": NanoSortable;
@@ -8556,7 +8533,9 @@ declare module "@stencil/core" {
              */
             "nano-nav-item": LocalJSX.NanoNavItem & JSXBase.HTMLAttributes<HTMLNanoNavItemElement>;
             /**
-             * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+             * Selectable items for use within [select](/components/select) and [datalist](/components/datalist).
+             * @version 2.0.0
+             * @status stable
              */
             "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
             /**
@@ -8587,11 +8566,10 @@ declare module "@stencil/core" {
              */
             "nano-select": LocalJSX.NanoSelect & JSXBase.HTMLAttributes<HTMLNanoSelectElement>;
             /**
-             * Skeletons are used to show where content will eventually be drawn.
+             * An item to display within [slides](/components/slides).
              * @version 1.0.0
              * @status stable
              */
-            "nano-skeleton": LocalJSX.NanoSkeleton & JSXBase.HTMLAttributes<HTMLNanoSkeletonElement>;
             "nano-slide": LocalJSX.NanoSlide & JSXBase.HTMLAttributes<HTMLNanoSlideElement>;
             /**
              * A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time.
@@ -8609,6 +8587,7 @@ declare module "@stencil/core" {
              * Spinners are used to show the progress of an indeterminate operation.
              * @version 1.0.0
              * @status stable
+             * @type CSS Only
              */
             "nano-spinner": LocalJSX.NanoSpinner & JSXBase.HTMLAttributes<HTMLNanoSpinnerElement>;
             /**

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-25T22:41:44",
+  "timestamp": "2025-06-27T14:28:01",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.1-dev.1750682262.1ce9541",
@@ -6551,7 +6551,6 @@
         "nano-masked-overflow",
         "nano-resize-observe",
         "nano-progress-bar",
-        "nano-skeleton",
         "nano-spinner",
         "nano-icon",
         "nano-tooltip"
@@ -6561,7 +6560,6 @@
           "nano-masked-overflow",
           "nano-resize-observe",
           "nano-progress-bar",
-          "nano-skeleton",
           "nano-spinner",
           "nano-icon",
           "nano-tooltip"
@@ -14238,7 +14236,6 @@
           "nano-img"
         ],
         "nano-img": [
-          "nano-skeleton",
           "nano-resize-observe"
         ]
       }
@@ -15450,12 +15447,10 @@
         "nano-hero"
       ],
       "dependencies": [
-        "nano-skeleton",
         "nano-resize-observe"
       ],
       "dependencyGraph": {
         "nano-img": [
-          "nano-skeleton",
           "nano-resize-observe"
         ],
         "nano-hero": [
@@ -19355,8 +19350,16 @@
       "encapsulation": "shadow",
       "tag": "nano-option",
       "readme": "# nano-option\n\n\n",
-      "docs": "Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)",
+      "docs": "Selectable items for use within [select](/components/select) and [datalist](/components/datalist).",
       "docsTags": [
+        {
+          "name": "version",
+          "text": "2.0.0"
+        },
+        {
+          "name": "status",
+          "text": "stable"
+        },
         {
           "name": "slot",
           "text": "- main label. Defaults to `label` or `value` prop"
@@ -22231,11 +22234,11 @@
       }
     },
     {
-      "filePath": "src/components/skeleton/skeleton.tsx",
+      "filePath": "src/components/slides/slide.tsx",
       "encapsulation": "shadow",
-      "tag": "nano-skeleton",
-      "readme": "# nano-skeleton\n\n\n",
-      "docs": "Skeletons are used to show where content will eventually be drawn.",
+      "tag": "nano-slide",
+      "readme": "# ion-slides\n\nThe Slides component is a multi-section container. Each section can be swiped\nor dragged between. It contains any number of [Slide](../slide) components.\n\n\nAdopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\nCopyright 2016, Vladimir Kharlampidi\nThe iDangero.us\nhttp://www.idangero.us/\n\nLicensed under MIT\n\n## Custom Animations\n\nBy default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.\n\n\n### Coverflow\n\n```typescript\nconst slideOpts = {\n  slidesPerView: 3,\n  coverflowEffect: {\n    rotate: 50,\n    stretch: 0,\n    depth: 100,\n    modifier: 1,\n    slideShadows: true,\n  },\n  on: {\n    beforeInit() {\n      const swiper = this;\n\n      swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n      swiper.params.watchSlidesProgress = true;\n      swiper.originalParams.watchSlidesProgress = true;\n    },\n    setTranslate() {\n      const swiper = this;\n      const {\n        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $\n      } = swiper;\n      const params = swiper.params.coverflowEffect;\n      const isHorizontal = swiper.isHorizontal();\n      const transform$$1 = swiper.translate;\n      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);\n      const rotate = isHorizontal ? params.rotate : -params.rotate;\n      const translate = params.depth;\n      // Each slide offset from center\n      for (let i = 0, length = slides.length; i < length; i += 1) {\n        const $slideEl = slides.eq(i);\n        const slideSize = slidesSizesGrid[i];\n        const slideOffset = $slideEl[0].swiperSlideOffset;\n        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;\n\n         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;\n        let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;\n        // var rotateZ = 0\n        let translateZ = -translate * Math.abs(offsetMultiplier);\n\n         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);\n        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;\n\n         // Fix for ultra small values\n        if (Math.abs(translateX) < 0.001) translateX = 0;\n        if (Math.abs(translateY) < 0.001) translateY = 0;\n        if (Math.abs(translateZ) < 0.001) translateZ = 0;\n        if (Math.abs(rotateY) < 0.001) rotateY = 0;\n        if (Math.abs(rotateX) < 0.001) rotateX = 0;\n\n         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n\n         $slideEl.transform(slideTransform);\n        $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;\n        if (params.slideShadows) {\n          // Set shadows\n          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if ($shadowBeforeEl.length === 0) {\n            $shadowBeforeEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n            $slideEl.append($shadowBeforeEl);\n          }\n          if ($shadowAfterEl.length === 0) {\n            $shadowAfterEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append($shadowAfterEl);\n          }\n          if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;\n          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;\n        }\n      }\n\n       // Set correct perspective for IE10\n      if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {\n        const ws = $wrapperEl[0].style;\n        ws.perspectiveOrigin = `${center}px 50%`;\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      swiper.slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n    }\n  }\n}\n```\n\n### Cube\n\n```typescript\nconst slideOpts = {\n  grabCursor: true,\n  cubeEffect: {\n    shadow: true,\n    slideShadows: true,\n    shadowOffset: 20,\n    shadowScale: 0.94,\n  },\n  on: {\n    beforeInit: function() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        resistanceRatio: 0,\n        spaceBetween: 0,\n        centeredSlides: false,\n        virtualTranslate: true,\n      };\n\n      this.params = Object.assign(this.params, overwriteParams);\n      this.originalParams = Object.assign(this.originalParams, overwriteParams);\n    },\n    setTranslate: function() {\n      const swiper = this;\n      const {\n        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,\n      } = swiper;\n      const params = swiper.params.cubeEffect;\n      const isHorizontal = swiper.isHorizontal();\n      const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n      let wrapperRotate = 0;\n      let $cubeShadowEl;\n      if (params.shadow) {\n        if (isHorizontal) {\n          $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');\n          if ($cubeShadowEl.length === 0) {\n            $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n            $wrapperEl.append($cubeShadowEl);\n          }\n          $cubeShadowEl.css({ height: `${swiperWidth}px` });\n        } else {\n          $cubeShadowEl = $el.find('.swiper-cube-shadow');\n          if ($cubeShadowEl.length === 0) {\n            $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n            $el.append($cubeShadowEl);\n          }\n        }\n      }\n\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = slides.eq(i);\n        let slideIndex = i;\n        if (isVirtual) {\n          slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);\n        }\n        let slideAngle = slideIndex * 90;\n        let round = Math.floor(slideAngle / 360);\n        if (rtl) {\n          slideAngle = -slideAngle;\n          round = Math.floor(-slideAngle / 360);\n        }\n        const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n        let tx = 0;\n        let ty = 0;\n        let tz = 0;\n        if (slideIndex % 4 === 0) {\n          tx = -round * 4 * swiperSize;\n          tz = 0;\n        } else if ((slideIndex - 1) % 4 === 0) {\n          tx = 0;\n          tz = -round * 4 * swiperSize;\n        } else if ((slideIndex - 2) % 4 === 0) {\n          tx = swiperSize + (round * 4 * swiperSize);\n          tz = swiperSize;\n        } else if ((slideIndex - 3) % 4 === 0) {\n          tx = -swiperSize;\n          tz = (3 * swiperSize) + (swiperSize * 4 * round);\n        }\n        if (rtl) {\n          tx = -tx;\n        }\n\n         if (!isHorizontal) {\n          ty = tx;\n          tx = 0;\n        }\n\n         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;\n        if (progress <= 1 && progress > -1) {\n          wrapperRotate = (slideIndex * 90) + (progress * 90);\n          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);\n        }\n        $slideEl.transform(transform$$1);\n        if (params.slideShadows) {\n          // Set shadows\n          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if (shadowBefore.length === 0) {\n            shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n            $slideEl.append(shadowBefore);\n          }\n          if (shadowAfter.length === 0) {\n            shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append(shadowAfter);\n          }\n          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n        }\n      }\n      $wrapperEl.css({\n        '-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        '-moz-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        '-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        'transform-origin': `50% 50% -${swiperSize / 2}px`,\n      });\n\n       if (params.shadow) {\n        if (isHorizontal) {\n          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);\n        } else {\n          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);\n          const multiplier = 1.5 - (\n            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)\n            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)\n          );\n          const scale1 = params.shadowScale;\n          const scale2 = params.shadowScale / multiplier;\n          const offset$$1 = params.shadowOffset;\n          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);\n        }\n      }\n\n      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;\n      $wrapperEl\n        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);\n    },\n    setTransition: function(duration) {\n      const swiper = this;\n      const { $el, slides } = swiper;\n      slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n      if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {\n        $el.find('.swiper-cube-shadow').transition(duration);\n      }\n    },\n  }\n}\n```\n\n### Fade\n\n```typescript\nconst slideOpts = {\n  on: {\n    beforeInit() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        spaceBetween: 0,\n        virtualTranslate: true,\n      };\n      swiper.params = Object.assign(swiper.params, overwriteParams);\n      swiper.params = Object.assign(swiper.originalParams, overwriteParams);\n    },\n    setTranslate() {\n      const swiper = this;\n      const { slides } = swiper;\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = swiper.slides.eq(i);\n        const offset$$1 = $slideEl[0].swiperSlideOffset;\n        let tx = -offset$$1;\n        if (!swiper.params.virtualTranslate) tx -= swiper.translate;\n        let ty = 0;\n        if (!swiper.isHorizontal()) {\n          ty = tx;\n          tx = 0;\n        }\n        const slideOpacity = swiper.params.fadeEffect.crossFade\n          ? Math.max(1 - Math.abs($slideEl[0].progress), 0)\n          : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);\n        $slideEl\n          .css({\n            opacity: slideOpacity,\n          })\n          .transform(`translate3d(${tx}px, ${ty}px, 0px)`);\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      const { slides, $wrapperEl } = swiper;\n      slides.transition(duration);\n      if (swiper.params.virtualTranslate && duration !== 0) {\n        let eventTriggered = false;\n        slides.transitionEnd(() => {\n          if (eventTriggered) return;\n          if (!swiper || swiper.destroyed) return;\n          eventTriggered = true;\n          swiper.animating = false;\n          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n          for (let i = 0; i < triggerEvents.length; i += 1) {\n            $wrapperEl.trigger(triggerEvents[i]);\n          }\n        });\n      }\n    },\n  }\n}\n```\n\n### Flip\n\n```typescript\nconst slideOpts = {\n  on: {\n    beforeInit() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        spaceBetween: 0,\n        virtualTranslate: true,\n      };\n      swiper.params = Object.assign(swiper.params, overwriteParams);\n      swiper.originalParams = Object.assign(swiper.originalParams, overwriteParams);\n    },\n    setTranslate() {\n      const swiper = this;\n      const { $, slides, rtlTranslate: rtl } = swiper;\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = slides.eq(i);\n        let progress = $slideEl[0].progress;\n        if (swiper.params.flipEffect.limitRotation) {\n          progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n        }\n        const offset$$1 = $slideEl[0].swiperSlideOffset;\n        const rotate = -180 * progress;\n        let rotateY = rotate;\n        let rotateX = 0;\n        let tx = -offset$$1;\n        let ty = 0;\n        if (!swiper.isHorizontal()) {\n          ty = tx;\n          tx = 0;\n          rotateX = -rotateY;\n          rotateY = 0;\n        } else if (rtl) {\n          rotateY = -rotateY;\n        }\n\n         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;\n\n         if (swiper.params.flipEffect.slideShadows) {\n          // Set shadows\n          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if (shadowBefore.length === 0) {\n            shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}\"></div>`);\n            $slideEl.append(shadowBefore);\n          }\n          if (shadowAfter.length === 0) {\n            shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append(shadowAfter);\n          }\n          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n        }\n        $slideEl\n          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      const { slides, activeIndex, $wrapperEl } = swiper;\n      slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n      if (swiper.params.virtualTranslate && duration !== 0) {\n        let eventTriggered = false;\n        // eslint-disable-next-line\n        slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {\n          if (eventTriggered) return;\n          if (!swiper || swiper.destroyed) return;\n\n          eventTriggered = true;\n          swiper.animating = false;\n          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n          for (let i = 0; i < triggerEvents.length; i += 1) {\n            $wrapperEl.trigger(triggerEvents[i]);\n          }\n        });\n      }\n    }\n  }\n};\n```\n",
+      "docs": "An item to display within [slides](/components/slides).",
       "docsTags": [
         {
           "name": "version",
@@ -22244,83 +22247,12 @@
         {
           "name": "status",
           "text": "stable"
-        }
-      ],
-      "usage": {},
-      "props": [
-        {
-          "name": "animated",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "animated",
-          "reflectToAttr": false,
-          "docs": "When `true`, the skeleton will animate.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "true"
-            }
-          ],
-          "default": "true",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [
-        {
-          "name": "--base-color-rgb",
-          "annotation": "prop",
-          "docs": "default var(--nano-skeleton-rgb, 228 230 232);"
-        },
-        {
-          "name": "--color",
-          "annotation": "prop",
-          "docs": "default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));"
         },
         {
-          "name": "--tint",
-          "annotation": "prop",
-          "docs": "default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));"
+          "name": "slot",
+          "text": "- main content of the slide"
         }
       ],
-      "slots": [],
-      "parts": [],
-      "dependents": [
-        "nano-data-table",
-        "nano-img"
-      ],
-      "dependencies": [],
-      "dependencyGraph": {
-        "nano-data-table": [
-          "nano-skeleton"
-        ],
-        "nano-img": [
-          "nano-skeleton"
-        ]
-      }
-    },
-    {
-      "filePath": "src/components/slides/slide.tsx",
-      "encapsulation": "shadow",
-      "tag": "nano-slide",
-      "readme": "# ion-slides\n\nThe Slides component is a multi-section container. Each section can be swiped\nor dragged between. It contains any number of [Slide](../slide) components.\n\n\nAdopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\nCopyright 2016, Vladimir Kharlampidi\nThe iDangero.us\nhttp://www.idangero.us/\n\nLicensed under MIT\n\n## Custom Animations\n\nBy default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below.\n\n\n### Coverflow\n\n```typescript\nconst slideOpts = {\n  slidesPerView: 3,\n  coverflowEffect: {\n    rotate: 50,\n    stretch: 0,\n    depth: 100,\n    modifier: 1,\n    slideShadows: true,\n  },\n  on: {\n    beforeInit() {\n      const swiper = this;\n\n      swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n      swiper.params.watchSlidesProgress = true;\n      swiper.originalParams.watchSlidesProgress = true;\n    },\n    setTranslate() {\n      const swiper = this;\n      const {\n        width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $\n      } = swiper;\n      const params = swiper.params.coverflowEffect;\n      const isHorizontal = swiper.isHorizontal();\n      const transform$$1 = swiper.translate;\n      const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);\n      const rotate = isHorizontal ? params.rotate : -params.rotate;\n      const translate = params.depth;\n      // Each slide offset from center\n      for (let i = 0, length = slides.length; i < length; i += 1) {\n        const $slideEl = slides.eq(i);\n        const slideSize = slidesSizesGrid[i];\n        const slideOffset = $slideEl[0].swiperSlideOffset;\n        const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;\n\n         let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;\n        let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;\n        // var rotateZ = 0\n        let translateZ = -translate * Math.abs(offsetMultiplier);\n\n         let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);\n        let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;\n\n         // Fix for ultra small values\n        if (Math.abs(translateX) < 0.001) translateX = 0;\n        if (Math.abs(translateY) < 0.001) translateY = 0;\n        if (Math.abs(translateZ) < 0.001) translateZ = 0;\n        if (Math.abs(rotateY) < 0.001) rotateY = 0;\n        if (Math.abs(rotateX) < 0.001) rotateX = 0;\n\n         const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n\n         $slideEl.transform(slideTransform);\n        $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;\n        if (params.slideShadows) {\n          // Set shadows\n          let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if ($shadowBeforeEl.length === 0) {\n            $shadowBeforeEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n            $slideEl.append($shadowBeforeEl);\n          }\n          if ($shadowAfterEl.length === 0) {\n            $shadowAfterEl = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append($shadowAfterEl);\n          }\n          if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;\n          if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;\n        }\n      }\n\n       // Set correct perspective for IE10\n      if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {\n        const ws = $wrapperEl[0].style;\n        ws.perspectiveOrigin = `${center}px 50%`;\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      swiper.slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n    }\n  }\n}\n```\n\n### Cube\n\n```typescript\nconst slideOpts = {\n  grabCursor: true,\n  cubeEffect: {\n    shadow: true,\n    slideShadows: true,\n    shadowOffset: 20,\n    shadowScale: 0.94,\n  },\n  on: {\n    beforeInit: function() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        resistanceRatio: 0,\n        spaceBetween: 0,\n        centeredSlides: false,\n        virtualTranslate: true,\n      };\n\n      this.params = Object.assign(this.params, overwriteParams);\n      this.originalParams = Object.assign(this.originalParams, overwriteParams);\n    },\n    setTranslate: function() {\n      const swiper = this;\n      const {\n        $el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,\n      } = swiper;\n      const params = swiper.params.cubeEffect;\n      const isHorizontal = swiper.isHorizontal();\n      const isVirtual = swiper.virtual && swiper.params.virtual.enabled;\n      let wrapperRotate = 0;\n      let $cubeShadowEl;\n      if (params.shadow) {\n        if (isHorizontal) {\n          $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');\n          if ($cubeShadowEl.length === 0) {\n            $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n            $wrapperEl.append($cubeShadowEl);\n          }\n          $cubeShadowEl.css({ height: `${swiperWidth}px` });\n        } else {\n          $cubeShadowEl = $el.find('.swiper-cube-shadow');\n          if ($cubeShadowEl.length === 0) {\n            $cubeShadowEl = swiper.$('<div class=\"swiper-cube-shadow\"></div>');\n            $el.append($cubeShadowEl);\n          }\n        }\n      }\n\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = slides.eq(i);\n        let slideIndex = i;\n        if (isVirtual) {\n          slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);\n        }\n        let slideAngle = slideIndex * 90;\n        let round = Math.floor(slideAngle / 360);\n        if (rtl) {\n          slideAngle = -slideAngle;\n          round = Math.floor(-slideAngle / 360);\n        }\n        const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n        let tx = 0;\n        let ty = 0;\n        let tz = 0;\n        if (slideIndex % 4 === 0) {\n          tx = -round * 4 * swiperSize;\n          tz = 0;\n        } else if ((slideIndex - 1) % 4 === 0) {\n          tx = 0;\n          tz = -round * 4 * swiperSize;\n        } else if ((slideIndex - 2) % 4 === 0) {\n          tx = swiperSize + (round * 4 * swiperSize);\n          tz = swiperSize;\n        } else if ((slideIndex - 3) % 4 === 0) {\n          tx = -swiperSize;\n          tz = (3 * swiperSize) + (swiperSize * 4 * round);\n        }\n        if (rtl) {\n          tx = -tx;\n        }\n\n         if (!isHorizontal) {\n          ty = tx;\n          tx = 0;\n        }\n\n         const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;\n        if (progress <= 1 && progress > -1) {\n          wrapperRotate = (slideIndex * 90) + (progress * 90);\n          if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);\n        }\n        $slideEl.transform(transform$$1);\n        if (params.slideShadows) {\n          // Set shadows\n          let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if (shadowBefore.length === 0) {\n            shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}\"></div>`);\n            $slideEl.append(shadowBefore);\n          }\n          if (shadowAfter.length === 0) {\n            shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append(shadowAfter);\n          }\n          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n        }\n      }\n      $wrapperEl.css({\n        '-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        '-moz-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        '-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,\n        'transform-origin': `50% 50% -${swiperSize / 2}px`,\n      });\n\n       if (params.shadow) {\n        if (isHorizontal) {\n          $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);\n        } else {\n          const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);\n          const multiplier = 1.5 - (\n            (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)\n            + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)\n          );\n          const scale1 = params.shadowScale;\n          const scale2 = params.shadowScale / multiplier;\n          const offset$$1 = params.shadowOffset;\n          $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset$$1}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);\n        }\n      }\n\n      const zFactor = (swiper.browser.isSafari || swiper.browser.isUiWebView) ? (-swiperSize / 2) : 0;\n      $wrapperEl\n        .transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);\n    },\n    setTransition: function(duration) {\n      const swiper = this;\n      const { $el, slides } = swiper;\n      slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n      if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {\n        $el.find('.swiper-cube-shadow').transition(duration);\n      }\n    },\n  }\n}\n```\n\n### Fade\n\n```typescript\nconst slideOpts = {\n  on: {\n    beforeInit() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        spaceBetween: 0,\n        virtualTranslate: true,\n      };\n      swiper.params = Object.assign(swiper.params, overwriteParams);\n      swiper.params = Object.assign(swiper.originalParams, overwriteParams);\n    },\n    setTranslate() {\n      const swiper = this;\n      const { slides } = swiper;\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = swiper.slides.eq(i);\n        const offset$$1 = $slideEl[0].swiperSlideOffset;\n        let tx = -offset$$1;\n        if (!swiper.params.virtualTranslate) tx -= swiper.translate;\n        let ty = 0;\n        if (!swiper.isHorizontal()) {\n          ty = tx;\n          tx = 0;\n        }\n        const slideOpacity = swiper.params.fadeEffect.crossFade\n          ? Math.max(1 - Math.abs($slideEl[0].progress), 0)\n          : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);\n        $slideEl\n          .css({\n            opacity: slideOpacity,\n          })\n          .transform(`translate3d(${tx}px, ${ty}px, 0px)`);\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      const { slides, $wrapperEl } = swiper;\n      slides.transition(duration);\n      if (swiper.params.virtualTranslate && duration !== 0) {\n        let eventTriggered = false;\n        slides.transitionEnd(() => {\n          if (eventTriggered) return;\n          if (!swiper || swiper.destroyed) return;\n          eventTriggered = true;\n          swiper.animating = false;\n          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n          for (let i = 0; i < triggerEvents.length; i += 1) {\n            $wrapperEl.trigger(triggerEvents[i]);\n          }\n        });\n      }\n    },\n  }\n}\n```\n\n### Flip\n\n```typescript\nconst slideOpts = {\n  on: {\n    beforeInit() {\n      const swiper = this;\n      swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);\n      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);\n      const overwriteParams = {\n        slidesPerView: 1,\n        slidesPerColumn: 1,\n        slidesPerGroup: 1,\n        watchSlidesProgress: true,\n        spaceBetween: 0,\n        virtualTranslate: true,\n      };\n      swiper.params = Object.assign(swiper.params, overwriteParams);\n      swiper.originalParams = Object.assign(swiper.originalParams, overwriteParams);\n    },\n    setTranslate() {\n      const swiper = this;\n      const { $, slides, rtlTranslate: rtl } = swiper;\n      for (let i = 0; i < slides.length; i += 1) {\n        const $slideEl = slides.eq(i);\n        let progress = $slideEl[0].progress;\n        if (swiper.params.flipEffect.limitRotation) {\n          progress = Math.max(Math.min($slideEl[0].progress, 1), -1);\n        }\n        const offset$$1 = $slideEl[0].swiperSlideOffset;\n        const rotate = -180 * progress;\n        let rotateY = rotate;\n        let rotateX = 0;\n        let tx = -offset$$1;\n        let ty = 0;\n        if (!swiper.isHorizontal()) {\n          ty = tx;\n          tx = 0;\n          rotateX = -rotateY;\n          rotateY = 0;\n        } else if (rtl) {\n          rotateY = -rotateY;\n        }\n\n         $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;\n\n         if (swiper.params.flipEffect.slideShadows) {\n          // Set shadows\n          let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');\n          let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');\n          if (shadowBefore.length === 0) {\n            shadowBefore = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}\"></div>`);\n            $slideEl.append(shadowBefore);\n          }\n          if (shadowAfter.length === 0) {\n            shadowAfter = swiper.$(`<div class=\"swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}\"></div>`);\n            $slideEl.append(shadowAfter);\n          }\n          if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);\n          if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);\n        }\n        $slideEl\n          .transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);\n      }\n    },\n    setTransition(duration) {\n      const swiper = this;\n      const { slides, activeIndex, $wrapperEl } = swiper;\n      slides\n        .transition(duration)\n        .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')\n        .transition(duration);\n      if (swiper.params.virtualTranslate && duration !== 0) {\n        let eventTriggered = false;\n        // eslint-disable-next-line\n        slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {\n          if (eventTriggered) return;\n          if (!swiper || swiper.destroyed) return;\n\n          eventTriggered = true;\n          swiper.animating = false;\n          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];\n          for (let i = 0; i < triggerEvents.length; i += 1) {\n            $wrapperEl.trigger(triggerEvents[i]);\n          }\n        });\n      }\n    }\n  }\n};\n```\n",
-      "docs": "The Slides component is a multi-section container. Each section can be swiped\nor dragged between. It contains any number of [Slide](../slide) components.\n\n\nAdopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\nCopyright 2016, Vladimir Kharlampidi\nThe iDangero.us\nhttp://www.idangero.us/\n\nLicensed under MIT",
-      "docsTags": [],
       "usage": {},
       "props": [
         {
@@ -22372,7 +22304,12 @@
       ],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "main content of the slide"
+        }
+      ],
       "parts": [],
       "dependents": [],
       "dependencies": [],
@@ -24181,7 +24118,7 @@
     },
     {
       "filePath": "src/components/spinner/spinner.tsx",
-      "encapsulation": "shadow",
+      "encapsulation": "none",
       "tag": "nano-spinner",
       "readme": "# nano-spinner\n\n\n",
       "docs": "Spinners are used to show the progress of an indeterminate operation.",
@@ -24194,9 +24131,17 @@
           "name": "status",
           "text": "stable"
         },
+        {
+          "name": "type",
+          "text": "CSS Only"
+        },
+        {
+          "name": "slot",
+          "text": "- Used for loading messages that should scale with current spinner / font size."
+        },
         {
           "name": "slot",
-          "text": "- Used for loading messages"
+          "text": "label - Used for loading messages that should not scale with spinner / font size."
         }
       ],
       "usage": {},
@@ -24229,76 +24174,41 @@
           "required": false,
           "getter": false,
           "setter": false
-        },
-        {
-          "name": "type",
-          "type": "\"circle\" | \"dna\"",
-          "complexType": {
-            "original": "'dna' | 'circle'",
-            "resolved": "\"circle\" | \"dna\"",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "type",
-          "reflectToAttr": false,
-          "docs": "The type of spinner animation",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'circle'"
-            }
-          ],
-          "default": "'circle'",
-          "values": [
-            {
-              "value": "circle",
-              "type": "string"
-            },
-            {
-              "value": "dna",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
         }
       ],
       "methods": [],
       "events": [],
       "listeners": [],
       "styles": [
-        {
-          "name": "--base-color-rgb",
-          "annotation": "prop",
-          "docs": "default var(--nano-indicator-rgb, 84 140 175)"
-        },
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));"
+          "docs": "Color of the spinner indicator. Defaults to var(--nano-color-primary-1000)."
         },
         {
           "name": "--overlay-color",
           "annotation": "prop",
-          "docs": "var(--nano-layer-overlay-light, rgb(255 255 255 / 70%));"
+          "docs": "Color of the overlay when the spinner has the `overlay` attribute. Defaults to rgb(var(--nano-color-base-rgb-0) / 88%)."
         },
         {
-          "name": "--spinner-scale",
+          "name": "--track-color",
           "annotation": "prop",
-          "docs": "optional scaling of the spinner. default contextual font-size"
+          "docs": "Color of the spinner track. Defaults to var(--nano-color-neutral-300)."
         },
         {
-          "name": "--track-color",
+          "name": "--track-size",
           "annotation": "prop",
-          "docs": "default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));"
+          "docs": "Size of the spinner track. Defaults to .1em."
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "Used for loading messages"
+          "docs": "Used for loading messages that should scale with current spinner / font size."
+        },
+        {
+          "name": "label",
+          "docs": "Used for loading messages that should not scale with spinner / font size."
         }
       ],
       "parts": [],

package/docs-vscode.json

@@ -2890,7 +2890,7 @@
       "name": "nano-option",
       "description": {
         "kind": "markdown",
-        "value": "Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)"
+        "value": "Selectable items for use within [select](/components/select) and [datalist](/components/datalist)."
       },
       "attributes": [
         {
@@ -3218,24 +3218,11 @@
         }
       ]
     },
-    {
-      "name": "nano-skeleton",
-      "description": {
-        "kind": "markdown",
-        "value": "Skeletons are used to show where content will eventually be drawn."
-      },
-      "attributes": [
-        {
-          "name": "animated",
-          "description": "When `true`, the skeleton will animate."
-        }
-      ]
-    },
     {
       "name": "nano-slide",
       "description": {
         "kind": "markdown",
-        "value": "The Slides component is a multi-section container. Each section can be swiped\nor dragged between. It contains any number of [Slide](../slide) components.\n\n\nAdopted from Swiper.js:\nThe most modern mobile touch slider and framework with hardware accelerated transitions.\n\nhttp://www.idangero.us/swiper/\n\nCopyright 2016, Vladimir Kharlampidi\nThe iDangero.us\nhttp://www.idangero.us/\n\nLicensed under MIT"
+        "value": "An item to display within [slides](/components/slides)."
       },
       "attributes": [
         {
@@ -3395,18 +3382,6 @@
         {
           "name": "overlay",
           "description": "Displays absolutely with an overlay"
-        },
-        {
-          "name": "type",
-          "description": "The type of spinner animation",
-          "values": [
-            {
-              "name": "circle"
-            },
-            {
-              "name": "dna"
-            }
-          ]
         }
       ]
     },