Update dependencies.

Swap babel-preset-es2015 for babel-preset-env
Update normalize.css
Use default autoprefixer browsers.
Fix misaligned filter search input.

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["es2015", { "modules": false }]
+    ["env", { "modules": false }]
   ],
   "plugins": ["external-helpers"]
 }

dist/shuffle.js

@@ -332,14 +332,14 @@ var Classes = {
   HIDDEN: 'shuffle-item--hidden'
 };
 
-var id$1 = 0;
+var id = 0;
 
 var ShuffleItem = function () {
   function ShuffleItem(element) {
     classCallCheck(this, ShuffleItem);
 
-    id$1 += 1;
+    id += 1;
-    this.id = id$1;
+    this.id = id;
     this.element = element;
 
     /**
@@ -863,7 +863,7 @@ function arrayUnique(x) {
 }
 
 // Used for unique instance variables
-var id = 0;
+var id$1 = 0;
 
 var Shuffle = function (_TinyEmitter) {
   inherits(Shuffle, _TinyEmitter);
@@ -900,8 +900,8 @@ var Shuffle = function (_TinyEmitter) {
     }
 
     _this.element = el;
-    _this.id = 'shuffle_' + id;
+    _this.id = 'shuffle_' + id$1;
-    id += 1;
+    id$1 += 1;
 
     _this._init();
     _this.isInitialized = true;

docs/css/normalize.css

@@ -1,3 +1,2 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
-/* search cancel styles removed */
+html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
-html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

docs/css/shuffle-styles.css

@@ -1 +1 @@
-.picture-item{height:220px;margin-left:0;margin-top:24px}.picture-item img{display:block;width:100%}@supports ((-o-object-fit:cover) or (object-fit:cover)){.picture-item img{-o-object-fit:cover;height:100%;max-width:none;object-fit:cover}}.picture-item--h2{height:464px}.picture-item__inner{background:#ecf0f1;height:100%;overflow:hidden;position:relative}img.picture-item__blur{display:none}.picture-item__details{-ms-flex-align:baseline;-ms-flex-pack:justify;-webkit-box-align:baseline;-webkit-box-pack:justify;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between;padding:1em;width:100%}.picture-item__description{margin:0;padding:0 2em 1em 1em;width:100%}.picture-item__title{-ms-flex-negative:0;flex-shrink:0;margin-right:4px}.picture-item__tags{-ms-flex-negative:1;flex-shrink:1;margin:0;text-align:right}@media screen and (min-width:768px){.picture-item--overlay .picture-item__details{background-color:rgba(0,0,0,.6);bottom:0;color:#fff;left:0;overflow:hidden;position:absolute;width:100%}.picture-item--overlay .picture-item__description{display:none}@supports ((-webkit-filter:blur(1px)) or (filter:blur(1px))) and ((-webkit-clip-path:inset(0 0 0 0)) or (clip-path:inset(0 0 0 0))){.picture-item--overlay .picture-item__blur{-webkit-clip-path:inset(170px 0 0 0);-webkit-filter:blur(7px);clip-path:inset(170px 0 0 0);display:block;filter:blur(7px);left:0;position:absolute;top:0;z-index:1}.picture-item--overlay .picture-item__details{background:none}.picture-item--overlay .picture-item__tags,.picture-item--overlay .picture-item__title{position:relative;z-index:2}}}.my-shuffle-container{overflow:hidden;position:relative}.my-sizer-element{opacity:0;position:absolute;visibility:hidden}.shuffle--animatein{overflow:visible}.shuffle--animatein .picture-item__inner{-webkit-transform:translateY(220px);opacity:0;transform:translateY(220px)}.shuffle--animatein .picture-item__inner--transition{transition:all .6s ease}.shuffle--animatein .picture-item.in .picture-item__inner{-webkit-transform:translate(0);opacity:1;transform:translate(0)}@media screen and (max-width:767px){.picture-item{height:auto;margin-top:20px}.picture-item__description,.picture-item__details{font-size:.875em;padding:.625em}.picture-item__description{padding-bottom:1.25em;padding-right:.875em}.picture-item--h2{height:auto}}
+.picture-item{height:220px;margin-left:0;margin-top:24px}.picture-item img{display:block;width:100%}@supports ((-o-object-fit:cover) or (object-fit:cover)){.picture-item img{-o-object-fit:cover;height:100%;max-width:none;object-fit:cover}}.picture-item--h2{height:464px}.picture-item__inner{background:#ecf0f1;height:100%;overflow:hidden;position:relative}img.picture-item__blur{display:none}.picture-item__details{align-items:baseline;display:flex;justify-content:space-between;padding:1em;width:100%}.picture-item__description{margin:0;padding:0 2em 1em 1em;width:100%}.picture-item__title{flex-shrink:0;margin-right:4px}.picture-item__tags{flex-shrink:1;margin:0;text-align:right}@media screen and (min-width:768px){.picture-item--overlay .picture-item__details{background-color:rgba(0,0,0,.6);bottom:0;color:#fff;left:0;overflow:hidden;position:absolute;width:100%}.picture-item--overlay .picture-item__description{display:none}@supports ((-webkit-filter:blur(1px)) or (filter:blur(1px))) and ((-webkit-clip-path:inset(0 0 0 0)) or (clip-path:inset(0 0 0 0))){.picture-item--overlay .picture-item__blur{-webkit-clip-path:inset(170px 0 0 0);-webkit-filter:blur(7px);clip-path:inset(170px 0 0 0);display:block;filter:blur(7px);left:0;position:absolute;top:0;z-index:1}.picture-item--overlay .picture-item__details{background:none}.picture-item--overlay .picture-item__tags,.picture-item--overlay .picture-item__title{position:relative;z-index:2}}}.my-shuffle-container{overflow:hidden;position:relative}.my-sizer-element{opacity:0;position:absolute;visibility:hidden}.shuffle--animatein{overflow:visible}.shuffle--animatein .picture-item__inner{-webkit-transform:translateY(220px);opacity:0;transform:translateY(220px)}.shuffle--animatein .picture-item__inner--transition{transition:all .6s ease}.shuffle--animatein .picture-item.in .picture-item__inner{-webkit-transform:translate(0);opacity:1;transform:translate(0)}@media screen and (max-width:767px){.picture-item{height:auto;margin-top:20px}.picture-item__description,.picture-item__details{font-size:.875em;padding:.625em}.picture-item__description{padding-bottom:1.25em;padding-right:.875em}.picture-item--h2{height:auto}}

docs/dist/shuffle.js

@@ -332,14 +332,14 @@ var Classes = {
   HIDDEN: 'shuffle-item--hidden'
 };
 
-var id$1 = 0;
+var id = 0;
 
 var ShuffleItem = function () {
   function ShuffleItem(element) {
     classCallCheck(this, ShuffleItem);
 
-    id$1 += 1;
+    id += 1;
-    this.id = id$1;
+    this.id = id;
     this.element = element;
 
     /**
@@ -863,7 +863,7 @@ function arrayUnique(x) {
 }
 
 // Used for unique instance variables
-var id = 0;
+var id$1 = 0;
 
 var Shuffle = function (_TinyEmitter) {
   inherits(Shuffle, _TinyEmitter);
@@ -900,8 +900,8 @@ var Shuffle = function (_TinyEmitter) {
     }
 
     _this.element = el;
-    _this.id = 'shuffle_' + id;
+    _this.id = 'shuffle_' + id$1;
-    id += 1;
+    id$1 += 1;
 
     _this._init();
     _this.isInitialized = true;

docs/index.html

@@ -27,9 +27,11 @@ prism: true
 
     <div class="row">
 
-      <div class="col-4@sm col-3@md filters-group">
+      <div class="col-4@sm col-3@md">
-        <label for="filters-search-input" class="filter-label">Search</label>
+        <div class="filters-group">
-        <input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
+          <label for="filters-search-input" class="filter-label">Search</label>
+          <input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
+        </div>
       </div>
 
     </div>

gulp/tasks/css.js

@@ -4,22 +4,14 @@ const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 
-// This is the support list for the website, not shuffle.
-const browsersList = [
-  '> 1%',
-  'last 2 versions',
-  'not IE < 11',
-  'not BlackBerry <= 10',
-];
-
 module.exports = function css() {
   return gulp.src([
     './docs/_scss/shuffle-styles.scss',
     './docs/_scss/style.scss',
   ])
-  .pipe(sass().on('error', (err) => {
+    .pipe(sass().on('error', (err) => {
-    console.error(err.formatted);
+      console.error(err.formatted);
-  }))
+    }))
-  .pipe(postcss([autoprefixer({ browsers: browsersList }), cssnano()]))
+    .pipe(postcss([autoprefixer(), cssnano()]))
-  .pipe(gulp.dest('./docs/css/'));
+    .pipe(gulp.dest('./docs/css/'));
 };

package.json

@@ -52,24 +52,24 @@
     "autoprefixer": "^8.0.0",
     "babel-core": "^6.26.0",
     "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
     "chai": "^4.0.1",
-    "chai-dom": "^1.4.0",
+    "chai-dom": "^1.7.0",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.3",
-    "cssnano": "^4.0.0-rc.1",
+    "cssnano": "^4.0.0-rc.2",
     "eslint": "^4.11.0",
-    "gulp": "github:gulpjs/gulp#4.0",
+    "gulp": "^4.0.0",
-    "gulp-mocha-phantomjs": "^0.12.0",
+    "gulp-mocha-phantomjs": "^0.12.2",
-    "gulp-postcss": "^7.0.0",
+    "gulp-postcss": "^7.0.1",
     "gulp-sass": "^3.1.0",
-    "gulp-shell": "^0.6.1",
+    "gulp-shell": "^0.6.5",
     "gulp-util": "^3.0.7",
     "mocha": "^5.0.0",
     "rollup": "^0.55.5",
-    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-commonjs": "^8.3.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-node-resolve": "^3.0.2",
     "rollup-plugin-uglify": "^3.0.0",
-    "sinon": "^4.0.0"
+    "sinon": "^4.3.0"
   }
 }