@evermade/overflow-slider 3.3.1 → 4.0.0

package/docs/index.html

@@ -190,6 +190,67 @@
 								</div>
 							</div>
 
+							<div class="entry__item">
+								<h3>Autoplay (slide)</h3>
+								<p>Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.</p>
+								<div class="example-container-1-autoplay-wrap-slide">
+									<div class="overflow-slider example-container example-container-1-autoplay-slide">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+									</div>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Autoplay (view)</h3>
+								<p>Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.</p>
+								<div class="example-container-1-autoplay-wrap-view">
+									<div class="overflow-slider example-container example-container-1-autoplay-view">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+									</div>
+								</div>
+							</div>
+<!--
+							<div class="entry__item">
+								<h3>Infinite scroll</h3>
+								<p>This is a bad idea. Please don't use.</p>
+								<div class="example-container-1-infinite-wrap">
+									<div class="overflow-slider example-container example-container-1-infinite">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+										<a href="#11" class="example-item example-item--11">11</a>
+										<a href="#12" class="example-item example-item--12">12</a>
+										<a href="#13" class="example-item example-item--13">13</a>
+									</div>
+								</div>
+							</div>
+-->
+
 						</section>
 
 						<section class="entry__section">
@@ -363,7 +424,7 @@
 
 							<div class="entry__item">
 								<h3>Synced Slider</h3>
-								<p>Sync slides from thumbnails. </p>
+								<p>Sync slides from thumbnails.</p>
 								<div class="example-container-4-thumbnails-wrapper">
 									<div class="overflow-slider example-container-4-synced-main">
 										<a href="#1" class="example-item example-item--1">1</a>
@@ -396,6 +457,21 @@
 								</div>
 							</div>
 
+							<div class="entry__item">
+								<h3>Autoplaying Hero</h3>
+								<p>It's possible. Not saying you should.</p>
+								<div class="example-container-4-hero__wrapper">
+									<div class="example-container-4-hero__autoplay"></div>
+									<div class="example-container-4-hero__dots"></div>
+									<div class="overflow-slider example-container-4-hero">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+									</div>
+								</div>
+							</div>
+
 						</section>
 
 					</div>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "3.3.1",
-	"description": "Accessible slider tha works with overflow: auto.",
+	"version": "4.0.0",
+	"description": "Accessible slider that is powered by overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",
 	"module": "dist/index.esm.js",
@@ -9,41 +9,63 @@
 	"exports": {
 		".": {
 			"import": "./dist/index.esm.js",
-			"require": "./dist/index.min.js"
+			"require": "./dist/index.min.js",
+			"types": "./dist/index.d.ts"
 		},
 		"./plugins/drag-scrolling": {
 			"import": "./dist/plugins/drag-scrolling/index.esm.js",
-			"require": "./dist/plugins/drag-scrolling/index.min.js"
+			"require": "./dist/plugins/drag-scrolling/index.min.js",
+			"types": "./dist/plugins/drag-scrolling/index.d.ts"
 		},
 		"./plugins/skip-links": {
 			"import": "./dist/plugins/skip-links/index.esm.js",
-			"require": "./dist/plugins/skip-links/index.min.js"
+			"require": "./dist/plugins/skip-links/index.min.js",
+			"types": "./dist/plugins/skip-links/index.d.ts"
 		},
 		"./plugins/scroll-indicator": {
 			"import": "./dist/plugins/scroll-indicator/index.esm.js",
-			"require": "./dist/plugins/scroll-indicator/index.min.js"
+			"require": "./dist/plugins/scroll-indicator/index.min.js",
+			"types": "./dist/plugins/scroll-indicator/index.d.ts"
 		},
 		"./plugins/arrows": {
 			"import": "./dist/plugins/arrows/index.esm.js",
-			"require": "./dist/plugins/arrows/index.min.js"
+			"require": "./dist/plugins/arrows/index.min.js",
+			"types": "./dist/plugins/arrows/index.d.ts"
+		},
+		"./plugins/autoplay": {
+			"import": "./dist/plugins/autoplay/index.esm.js",
+			"require": "./dist/plugins/autoplay/index.min.js",
+			"types": "./dist/plugins/autoplay/index.d.ts"
 		},
 		"./plugins/full-width": {
 			"import": "./dist/plugins/full-width/index.esm.js",
-			"require": "./dist/plugins/full-width/index.min.js"
+			"require": "./dist/plugins/full-width/index.min.js",
+			"types": "./dist/plugins/full-width/index.d.ts"
 		},
 		"./plugins/dots": {
 			"import": "./dist/plugins/dots/index.esm.js",
-			"require": "./dist/plugins/dots/index.min.js"
+			"require": "./dist/plugins/dots/index.min.js",
+			"types": "./dist/plugins/dots/index.d.ts"
 		},
 		"./plugins/thumbnails": {
 			"import": "./dist/plugins/thumbnails/index.esm.js",
-			"require": "./dist/plugins/thumbnails/index.min.js"
+			"require": "./dist/plugins/thumbnails/index.min.js",
+			"types": "./dist/plugins/thumbnails/index.d.ts"
 		},
 		"./plugins/fade": {
 			"import": "./dist/plugins/fade/index.esm.js",
-			"require": "./dist/plugins/fade/index.min.js"
+			"require": "./dist/plugins/fade/index.min.js",
+			"types": "./dist/plugins/fade/index.d.ts"
+		},
+		"./plugins/infinite-scroll": {
+			"import": "./dist/plugins/infinite-scroll/index.esm.js",
+			"require": "./dist/plugins/infinite-scroll/index.min.js",
+			"types": "./dist/plugins/infinite-scroll/index.d.ts"
 		},
-		"./style.css": "./dist/overflow-slider.css"
+		"./style.css": "./dist/overflow-slider.css",
+		"./style": "./dist/overflow-slider.css",
+		"./mixins.scss": "./dist/mixins.scss",
+		"./mixins": "./dist/mixins.scss"
 	},
 	"repository": {
 		"type": "git",
@@ -53,11 +75,11 @@
 		"overflow-slider"
 	],
 	"scripts": {
-		"build": "rollup -c",
+		"build": "rollup -c --bundleConfigAsCjs",
 		"compress": "gzip -9 -fkc dist/index.min.js > dist/index.min.js.gz",
 		"show": "ls -lh dist/index.min.js.gz | awk '{print \"Gzipped script size:\", $5\"B\"}'",
 		"size": "npm run build -- --silent && npm run compress --silent && npm run show && rm dist/index.min.js.gz",
-		"watch": "rollup -c -w",
+		"start": "rollup -c -w --bundleConfigAsCjs",
 		"test": "echo \"No tests specified\" && exit 0"
 	},
 	"author": "Teemu Suoranta, Evermade",
@@ -66,21 +88,22 @@
 		"url": "https://github.com/evermade/overflow-slider/issues"
 	},
 	"devDependencies": {
-		"@rollup/plugin-commonjs": "^24.0.0",
-		"@rollup/plugin-node-resolve": "^15.0.0",
-		"@rollup/plugin-typescript": "^11.1.2",
-		"@tsconfig/recommended": "^1.0.2",
-		"@wordpress/eslint-plugin": "^14.3.0",
-		"@wordpress/prettier-config": "^2.13.0",
-		"autoprefixer": "^10.4.17",
-		"cssnano": "^6.0.3",
-		"eslint": "^8.37.0",
-		"rollup": "^2.79.1",
+		"@rollup/plugin-commonjs": "^28.0.6",
+		"@rollup/plugin-node-resolve": "^16.0.1",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^12.1.3",
+		"@tsconfig/recommended": "^1.0.10",
+		"@wordpress/eslint-plugin": "^22.11.0",
+		"@wordpress/prettier-config": "^4.25.0",
+		"autoprefixer": "^10.4.21",
+		"cssnano": "^7.0.7",
+		"eslint": "^9.29.0",
+		"rollup": "^4.44.0",
 		"rollup-plugin-copy": "^3.5.0",
+		"rollup-plugin-dts": "^6.2.1",
 		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-terser": "^7.0.2",
-		"sass": "^1.70.0",
-		"typescript": "^5.1.6"
+		"sass": "^1.89.2",
+		"typescript": "^5.8.3"
 	},
 	"homepage": "https://github.com/evermade/overflow-slider#readme",
 	"publishConfig": {

package/rollup.config.js

@@ -1,79 +1,103 @@
-import { terser } from 'rollup-plugin-terser';
+// rollup.config.js
+import path from 'path';
+import glob from 'glob';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import copy from 'rollup-plugin-copy';
-import glob from 'glob';
+import terser from '@rollup/plugin-terser';
+import { dts } from 'rollup-plugin-dts';
+
+// Define core entry and plugin entries separately
+const coreInput = 'src/index.ts';
+const pluginInputs = glob
+	.sync('src/plugins/*/index.ts')
+	.reduce((out, file) => {
+		const name = path.basename(path.dirname(file));
+		out[name] = file;
+		return out;
+	}, {});
+// For declarations, include both core and plugins
+const allEntries = { index: coreInput, ...pluginInputs };
 
 const plugins = [
-		typescript(),
-		nodeResolve(),
-		commonjs({ include: 'node_modules/**' }),
-		postcss({
-				extract: 'overflow-slider.css',
-				plugins: [
-						require('autoprefixer'),
-						require('cssnano')({ preset: 'default', }),
-				],
-				minimize: true,
-				sourceMap: false,
-				extensions: ['.scss', '.css'],
-		}),
-		copy({
-				targets: [
-						{
-							src: 'dist/*',
-							dest: 'docs/dist',
-						},
-				],
-				hook: 'writeBundle'
-		})
+	typescript({
+		tsconfig: './tsconfig.json',
+		declaration: false,
+		declarationMap: false,
+	}),
+	nodeResolve(),
+	commonjs({ include: 'node_modules/**' }),
+	postcss({
+		extract: 'overflow-slider.css',
+		plugins: [ require('autoprefixer'), require('cssnano')({ preset: 'default' }) ],
+		minimize: true,
+		sourceMap: false,
+		extensions: ['.scss', '.css'],
+	}),
+	copy({ targets: [{ src: 'dist/*', dest: 'docs/dist' }], hook: 'writeBundle' }),
+	copy({
+		targets: [
+			{ src: 'src/mixins.scss', dest: 'dist' },
+			{ src: 'dist/*', dest: 'docs/dist' },
+		],
+	}),
 ];
 
-// Adjusting here to include the core file
-const pluginEntries = {
-		index: 'src/index.ts', // Adding the core file
-		...glob.sync('src/plugins/**/*.ts').reduce((entries, path) => {
-			const name = path.replace(/^src\/plugins\//, '').replace(/\.ts$/, '');
-			entries[name] = path;
-			return entries;
-		}, {}),
-};
-
-const baseOutput = {
-		preserveModules: true,
-		preserveModulesRoot: 'src',
-};
+// Helper for plugin file naming
+function entryFmt(ext, isMin) {
+	return chunk => {
+		const id = chunk.facadeModuleId;
+		const pluginName = path.basename(path.dirname(id));
+		return `plugins/${pluginName}/index.${ext}.js`;
+	};
+}
 
 export default [
-		{
-				input: pluginEntries,
-				output: {
-						...baseOutput,
-						dir: 'dist',
-						format: 'es',
-						entryFileNames: (chunkInfo) => {
-							return chunkInfo.facadeModuleId.includes('/src/plugins/')
-								? 'index.esm.js'
-								: '[name].esm.js';
-						},
-				},
-				plugins,
-		},
-		{
-				input: pluginEntries,
-				output: {
-						...baseOutput,
-						dir: 'dist',
-						format: 'es',
-						entryFileNames: (chunkInfo) => {
-							return chunkInfo.facadeModuleId.includes('/src/plugins/')
-								? 'index.min.js'
-								: '[name].min.js';
-						},
-						plugins: [terser()],
-				},
-				plugins,
+	// —— Flat core ESM build (no internal imports) ——
+	{
+		input: coreInput,
+		output: { file: 'dist/index.esm.js', format: 'es', sourcemap: true, inlineDynamicImports: true },
+		plugins,
+	},
+
+	// —— Flat core CJS build (minified) ——
+	{
+		input: coreInput,
+		output: { file: 'dist/index.min.js', format: 'cjs', sourcemap: true, inlineDynamicImports: true, exports: 'auto' },
+		plugins: [...plugins, terser()],
+	},
+
+	// —— Per-plugin ESM build ——
+	{
+		input: pluginInputs,
+		output: { dir: 'dist', format: 'es', entryFileNames: entryFmt('esm', false) },
+		plugins,
+	},
+
+	// —— Per-plugin minified build ——
+	{
+		input: pluginInputs,
+		output: { dir: 'dist', format: 'es', entryFileNames: entryFmt('min', true) },
+		plugins: [...plugins, terser()],
+	},
+
+	// —— Declarations bundle (multi-entry) ——
+	{
+		input: allEntries,
+		external: [/\.scss$/],
+		output: {
+			dir: 'dist',
+			format: 'es',
+			preserveModules: true,
+			preserveModulesRoot: 'src',
+			entryFileNames: chunk => {
+				if (chunk.name === 'index') return 'index.d.ts';
+				const pluginName = path.basename(path.dirname(chunk.facadeModuleId));
+				return `plugins/${pluginName}/index.d.ts`;
+			},
 		},
+		plugins: [dts()],
+	},
 ];

package/src/core/details.ts

@@ -7,6 +7,7 @@ export default function details( slider: Slider) {
 	let hasOverflow = false;
 	let slideCount = 0;
 	let containerWidth = 0;
+	let containerHeight = 0;
 	let scrollableAreaWidth = 0;
 	let amountOfPages = 0;
 	let currentPage = 1;
@@ -19,6 +20,8 @@ export default function details( slider: Slider) {
 
 	containerWidth = slider.container.offsetWidth;
 
+	containerHeight = slider.container.offsetHeight;
+
 	scrollableAreaWidth = slider.getInclusiveScrollWidth();
 
 	amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
@@ -35,6 +38,7 @@ export default function details( slider: Slider) {
 		hasOverflow,
 		slideCount,
 		containerWidth,
+		containerHeight,
 		scrollableAreaWidth,
 		amountOfPages,
 		currentPage,

package/src/core/overflow-slider.ts

@@ -1,13 +1,14 @@
 import Slider from './slider';
 
 import {
+	SliderOptionArgs,
   SliderOptions,
   SliderPlugin,
 } from './types';
 
 export default function OverflowSlider (
 	container: HTMLElement,
-	options?: SliderOptions,
+	options?: SliderOptionArgs,
 	plugins?: SliderPlugin[]
 ) {
 	try {
@@ -17,7 +18,8 @@ export default function OverflowSlider (
 			throw new Error(`Container must be HTML element, found ${typeof container}`);
 		}
 
-		const defaults = {
+		const defaults: SliderOptionArgs = {
+			cssVariableContainer: container,
 			scrollBehavior: "smooth",
 			scrollStrategy: "fullSlide",
 			slidesSelector: ":scope > *",