Implement #39.

package.json

@@ -24,6 +24,7 @@
     "packages/embla-carousel-auto-scroll",
     "packages/embla-carousel-auto-height",
     "packages/embla-carousel-class-names",
+    "packages/embla-carousel-fade",
     "packages/embla-carousel-reactive-utils",
     "playgrounds/embla-carousel-playground-vanilla",
     "playgrounds/embla-carousel-playground-react",

packages/embla-carousel-docs/src/components/Examples/examplesCarouselStyles.ts

@@ -332,7 +332,7 @@ export const THUMBS_STYLES = css`
   }
 `
 
-const PROGRESS_STYLES = css`
+export const PROGRESS_STYLES = css`
   .embla__progress {
     ${CAROUSEL_SLIDE_RADIUS_STYLES};
     ${CAROUSEL_BORDER_SHADOW_STYLES};

packages/embla-carousel-fade/.eslintignore

@@ -0,0 +1,5 @@
+docs
+package.json
+package-lock.json
+yarn.lock
+node_modules

packages/embla-carousel-fade/.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  rules: {
+    'no-debugger': 2,
+    'no-console': 2,
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          '{}': false
+        },
+        extendDefaults: true
+      }
+    ]
+  }
+}

packages/embla-carousel-fade/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('../../.prettierrc.js')

packages/embla-carousel-fade/README.md

@@ -0,0 +1,209 @@
+<br />
+<div align="center">
+  <p align="center">
+    <a href="https://www.embla-carousel.com/"><img width="100" height="100" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
+    </a>
+  </p>
+
+  <p align="center">
+    <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8"></a>
+    <a href="https://www.npmjs.com/package/embla-carousel-fade"><img src="https://img.shields.io/npm/v/embla-carousel-fade.svg?color=%23c1a8e2"></a>
+    <a href="https://github.com/davidjerleke/embla-carousel/actions?query=workflow%3A%22Continuous+Integration%22"><img src="https://img.shields.io/github/actions/workflow/status/davidjerleke/embla-carousel/cd.yml?color=%238ab4f8"></a>
+    <a href="https://prettier.io"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?color=%23c1a8e2"></a>
+    <a href="https://bundlephobia.com/result?p=embla-carousel-fade@latest"><img src="https://img.shields.io/bundlephobia/minzip/embla-carousel-fade?color=%238ab4f8&label=gzip%20size">
+    </a>
+  </p>
+
+  <strong>
+    <h2 align="center">Embla Carousel Fade</h2>
+  </strong>
+
+  <p align="center">
+    <strong>Embla Carousel</strong> is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source.
+  </p>
+
+  <br>
+
+  <p align="center">
+    <strong>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/predefined/">Examples</a>&nbsp;</code>
+    </strong>
+  </p>
+
+  <p align="center">
+    <strong>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/generator/">Generator</a>&nbsp;</code>
+    </strong>
+  </p>
+
+  <p align="center">
+    <strong>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/get-started/#choose-installation-type">Installation</a>&nbsp;</code>
+    </strong>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Ready for</h2>
+  </strong>
+
+  <p align="center">
+    <a href="https://www.embla-carousel.com/get-started/module/">
+      <img src="https://www.embla-carousel.com/javascript-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/module/">
+      <img src="https://www.embla-carousel.com/typescript-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/react/">
+      <img src="https://www.embla-carousel.com/react-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/vue/">
+      <img src="https://www.embla-carousel.com/vue-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/svelte/">
+      <img src="https://www.embla-carousel.com/svelte-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/solid/">
+      <img src="https://www.embla-carousel.com/solid-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://github.com/donaldxdonald/embla-carousel-angular">
+      <img src="https://www.embla-carousel.com/angular-logo.svg" width="40" height="40" />
+    </a>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Contributors</h2>
+  </strong>
+  <p align="center">
+    Thank you to all contributors for making <a href="https://www.embla-carousel.com/">Embla Carousel</a> awesome! <a href="https://github.com/davidjerleke/embla-carousel/blob/master/CONTRIBUTING.md">Contributions</a> are welcome.
+  </p>
+  <p align="center">
+    <a href="https://github.com/davidjerleke">
+      <img src="https://avatars2.githubusercontent.com/u/11529148?s=120&v=4" title="davidjerleke" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/Ronit-gurjar">
+      <img src="https://avatars2.githubusercontent.com/u/92150685?s=120&v=4" title="Ronit-gurjar" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/zaaakher">
+      <img src="https://avatars2.githubusercontent.com/u/46135573?s=120&v=4" title="zaaakher" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/xiel">
+      <img src="https://avatars2.githubusercontent.com/u/615522?s=120&v=4" title="xiel" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/javiergonzalezGenially">
+      <img src="https://avatars2.githubusercontent.com/u/78730098?s=120&v=4" title="javiergonzalezGenially" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/hamidrezahanafi">
+      <img src="https://avatars2.githubusercontent.com/u/91487491?s=120&v=4" title="hamidrezahanafi" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/th-km">
+      <img src="https://avatars2.githubusercontent.com/u/35410212?s=120&v=4" title="th-km" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/openscript">
+      <img src="https://avatars2.githubusercontent.com/u/1105080?s=120&v=4" title="openscript" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/nwidynski">
+      <img src="https://avatars2.githubusercontent.com/u/25958801?s=120&v=4" title="nwidynski" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/wopian">
+      <img src="https://avatars2.githubusercontent.com/u/3440094?s=120&v=4" title="wopian" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/nikrowell">
+      <img src="https://avatars2.githubusercontent.com/u/260039?s=120&v=4" title="nikrowell" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/horseeyephil">
+      <img src="https://avatars2.githubusercontent.com/u/32337092?s=120&v=4" title="horseeyephil" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/pipisasa">
+      <img src="https://avatars2.githubusercontent.com/u/54534600?s=120&v=4" title="pipisasa" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/ranno-lauri">
+      <img src="https://avatars2.githubusercontent.com/u/87007115?s=120&v=4" title="ranno-lauri" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/ruijdacd">
+      <img src="https://avatars2.githubusercontent.com/u/9107610?s=120&v=4" title="ruijdacd" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/rojadesign">
+      <img src="https://avatars2.githubusercontent.com/u/35687281?s=120&v=4" title="rojadesign" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/sadeghbarati">
+      <img src="https://avatars2.githubusercontent.com/u/17789047?s=120&v=4" title="sadeghbarati" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/smultar">
+      <img src="https://avatars2.githubusercontent.com/u/6223536?s=120&v=4" title="smultar" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/tlo-johnson">
+      <img src="https://avatars2.githubusercontent.com/u/8763144?s=120&v=4" title="tlo-johnson" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/anzbert">
+      <img src="https://avatars2.githubusercontent.com/u/38823700?s=120&v=4" title="anzbert" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/sarussss">
+      <img src="https://avatars2.githubusercontent.com/u/15656996?s=120&v=4" title="sarussss" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/silllli">
+      <img src="https://avatars2.githubusercontent.com/u/9334305?s=120&v=4" title="silllli" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/mujahidfa">
+      <img src="https://avatars2.githubusercontent.com/u/17759705?s=120&v=4" title="mujahidfa" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/romellem">
+      <img src="https://avatars2.githubusercontent.com/u/8504000?s=120&v=4" title="romellem" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/LucasMariniFalbo">
+      <img src="https://avatars2.githubusercontent.com/u/9245477?s=120&v=4" title="LucasMariniFalbo" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/LiamMartens">
+      <img src="https://avatars2.githubusercontent.com/u/5265324?s=120&v=4" title="LiamMartens" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/JoshuaCrewe">
+      <img src="https://avatars2.githubusercontent.com/u/12238901?s=120&v=4" title="JoshuaCrewe" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/ishaqibrahimbot">
+      <img src="https://avatars2.githubusercontent.com/u/74908398?s=120&v=4" title="ishaqibrahimbot" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/fcasibu">
+      <img src="https://avatars2.githubusercontent.com/u/75290989?s=120&v=4" title="fcasibu" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/cundd">
+      <img src="https://avatars2.githubusercontent.com/u/743122?s=120&v=4" title="cundd" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/sedlukha">
+      <img src="https://avatars2.githubusercontent.com/u/14075940?s=120&v=4" title="sedlukha" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/allen-garvey">
+      <img src="https://avatars2.githubusercontent.com/u/9314727?s=120&v=4" title="allen-garvey" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/SaizFerri">
+      <img src="https://avatars2.githubusercontent.com/u/19834971?s=120&v=4" title="SaizFerri" width="50" height="50" style="max-width: 100%" />
+    </a>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Special Thanks</h2>
+  </strong>
+  <p align="center">
+    <sup>
+      <a href="https://github.com/gunnarx2">gunnarx2</a> - React wrapper <a href="https://www.embla-carousel.com/get-started/react/">useEmblaCarousel</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/LiamMartens">LiamMartens</a> - Solid wrapper <a href="https://www.embla-carousel.com/get-started/solid/">createEmblaCarousel</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/donaldxdonald">donaldxdonald</a>, <a href="https://github.com/zip-fa">zip-fa</a>, <a href="https://github.com/JeanMeche">JeanMeche</a> - Angular wrapper <a href="https://github.com/donaldxdonald/embla-carousel-angular?tab=readme-ov-file#installation">EmblaCarouselDirective</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/xiel">xiel</a> - Plugin <a href="https://github.com/xiel/embla-carousel-wheel-gestures">Embla Carousel Wheel Gestures</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/zaaakher">zaaakher</a> - Contributing <a href="https://github.com/davidjerleke/embla-carousel/blob/master/CONTRIBUTING.md">guidelines</a>.
+    </sup>
+  </p>
+</div>
+
+<br>
+
+<h2 align="center">Open Source</h2>
+
+<p align="center">
+  Embla is <a href="https://github.com/davidjerleke/embla-carousel/blob/master/LICENSE">MIT licensed</a> 💖.<br><br>
+  <sup>Embla Carousel - Copyright © 2019-present.</sup><br />
+  <sup>Package created by David Jerleke.</sup>
+</p>
+
+<p align="center">
+  <strong>· · ·</strong>
+</p>
+
+<p align="center">
+  Thanks <a href="https://www.browserstack.com">BrowserStack</a>.
+</p>
+
+<p align="center">
+  <a href="https://www.browserstack.com">
+    <img src="https://www.embla-carousel.com/browserstack-logo.svg" width="45" height="45" />
+    </a>
+</p>

packages/embla-carousel-fade/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  transform: {
+    '^.+\\.(t|j)sx?$': 'ts-jest'
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testEnvironment: 'jsdom'
+}

packages/embla-carousel-fade/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "embla-carousel-fade",
+  "version": "8.0.4",
+  "author": "David Jerleke",
+  "description": "A fade plugin for Embla Carousel",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davidjerleke/embla-carousel"
+  },
+  "bugs": {
+    "url": "https://github.com/davidjerleke/embla-carousel/issues"
+  },
+  "homepage": "https://www.embla-carousel.com",
+  "license": "MIT",
+  "keywords": [
+    "slider",
+    "carousel",
+    "slideshow",
+    "gallery",
+    "lightweight",
+    "touch",
+    "javascript",
+    "typescript",
+    "react",
+    "vue",
+    "svelte",
+    "solid"
+  ],
+  "main": "embla-carousel-fade.umd.js",
+  "unpkg": "embla-carousel-fade.umd.js",
+  "module": "./esm/embla-carousel-fade.esm.js",
+  "types": "index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "embla-carousel-fade*",
+    "components/**/*",
+    "index.d.ts",
+    "esm/**/*",
+    "cjs/**/*"
+  ],
+  "scripts": {
+    "test": "echo \"Info: no tests specified\" && exit 0",
+    "build": "rollup --bundleConfigAsCjs -c",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
+    "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "2.8.8",
+    "rollup": "^4.1.5",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "embla-carousel": "8.0.2"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/embla-carousel-fade.esm.js"
+      },
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/embla-carousel-fade.cjs.js"
+      }
+    }
+  }
+}