improve build, better defaults and improved body init

local/browser-testing/dist/support/utils/array.js

@@ -8,6 +8,7 @@ export function each(source, callback) {
         }
     }
     else if (source) {
+        // cant use support func keys here due to circular dep
         each(Object.keys(source), (key) => callback(source[key], key, source));
     }
     return source;

local/browser-testing/dist/support/utils/array.js.map

@@ -1 +1 @@
-{"version":3,"file":"array.js","sourceRoot":"","sources":["../../../src/support/utils/array.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAqChD,MAAM,UAAU,IAAI,CAClB,MAA2F,EAC3F,QAAuE;IAEvE,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE;QACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,KAAK,EAAE;gBAC5C,MAAM;aACP;SACF;KACF;SAAM,IAAI,MAAM,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;KACxE;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAU,GAAQ,EAAE,IAAO,EAAE,SAAkB,EAAU,EAAE,CAChF,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAE/B;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,KAAuB,EAAE,iBAA2B,EAAO,EAAE;IAC/F,CAAC,iBAAiB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC;QAC1D,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAY,CAAC;QACjD,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAU,CAAC,CAAC;IAC3B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAU,GAA2B,EAAE,EAAE;IAC3D,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC;IAC5B,MAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,IAAI,QAAQ,IAAI,GAAG,EAAE;QACnB,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;KACtB;IAED,IAAI,GAAG,YAAY,GAAG,EAAE;QACtB,GAAG,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACpB,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;KACJ;SAAM;QACL,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;YAChB,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA+B,EAAW,EAAE,CACvE,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,GAAkB,EAAE,IAAY,EAAE,IAAc,EAAQ,EAAE;IACxF,yCAAyC;IACzC,MAAM,KAAK,GAAG,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IACzE,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACjB,CAAC,IAAI,IAAI,CAAE,GAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACvC,CAAC,CAAC"}
+{"version":3,"file":"array.js","sourceRoot":"","sources":["../../../src/support/utils/array.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAqChD,MAAM,UAAU,IAAI,CAClB,MAA2F,EAC3F,QAAuE;IAEvE,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE;QACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,KAAK,EAAE;gBAC5C,MAAM;aACP;SACF;KACF;SAAM,IAAI,MAAM,EAAE;QACjB,sDAAsD;QACtD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;KACxE;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAU,GAAQ,EAAE,IAAO,EAAE,SAAkB,EAAU,EAAE,CAChF,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAE/B;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,KAAuB,EAAE,iBAA2B,EAAO,EAAE;IAC/F,CAAC,iBAAiB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC;QAC1D,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAY,CAAC;QACjD,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAU,CAAC,CAAC;IAC3B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAU,GAA2B,EAAE,EAAE;IAC3D,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC;IAC5B,MAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,IAAI,QAAQ,IAAI,GAAG,EAAE;QACnB,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;KACtB;IAED,IAAI,GAAG,YAAY,GAAG,EAAE;QACtB,GAAG,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACpB,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;KACJ;SAAM;QACL,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;YAChB,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA+B,EAAW,EAAE,CACvE,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,GAAkB,EAAE,IAAY,EAAE,IAAc,EAAQ,EAAE;IACxF,yCAAyC;IACzC,MAAM,KAAK,GAAG,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IACzE,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACjB,CAAC,IAAI,IAAI,CAAE,GAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACvC,CAAC,CAAC"}

local/config/src/playwright.js

@@ -6,7 +6,7 @@ module.exports = {
   actionTimeout: 300,
   navigationTimeout: 1000,
   retries: 0,
-  workers: 4,
+  workers: 1,
   projects: [
     {
       name: 'Chromium',

local/rollup/src/createRollupConfig.js

@@ -31,24 +31,29 @@ const resolvePath = (basePath, pathToResolve, appendExt) => {
   return normalizePath(result && appendExt ? appendExtension(result) : result);
 };
 
-const getWorkspaceAliases = () =>
+// if the import would be 'overlayscrollbars' and the package name is also 'overlayscrollbars' esbuild needs an alias to resolve it correctly
+// only needed for playwright with esbuild
+const getOverlappingPackageNameAliases = () =>
   pkg.workspaces
     .map((pattern) => glob.sync(pattern, { cwd: workspaceRoot }))
     .flat()
     .reduce((obj, resolvedPath) => {
-      let projTsConfig;
       const absolutePath = path.resolve(workspaceRoot, resolvedPath);
       try {
         // eslint-disable-next-line import/no-dynamic-require, global-require
-        projTsConfig = require(`${path.resolve(workspaceRoot, resolvedPath)}/tsconfig.json`);
+        const projTsConfig = require(`${path.resolve(workspaceRoot, resolvedPath)}/tsconfig.json`);
-      } catch {}
+        // eslint-disable-next-line import/no-dynamic-require, global-require
+        const projPackageJson = require(`${path.resolve(
+          workspaceRoot,
+          resolvedPath
+        )}/package.json`);
 
-      obj[`@/${path.basename(absolutePath)}`] = `${normalizePath(
+        const { name } = projPackageJson;
-        path.resolve(
+        const { compilerOptions } = projTsConfig;
-          absolutePath,
+        const { baseUrl } = compilerOptions;
-          projTsConfig?.compilerOptions?.baseUrl || defaultOptions.paths.src
+
-        )
+        obj[name] = resolvePath(absolutePath, path.join(baseUrl, name), true);
-      )}`;
+      } catch {}
       return obj;
     }, {});
 
@@ -91,7 +96,6 @@ const mergeAndResolveOptions = (userOptions) => {
       ...rawPaths,
     },
     alias: {
-      ...getWorkspaceAliases(),
       ...defaultAlias,
       ...rawAlias,
     },
@@ -133,13 +137,19 @@ const createConfig = (userOptions = {}) => {
   }
 
   if (isBuild) {
-    const js = pipelineBuild(resolve, options);
-    const types = extractTypes && pipelineTypes(resolve, options);
     const styles = extractStyles && pipelineStyles(resolve, options);
+    const types = extractTypes && pipelineTypes(resolve, options);
+    const js = pipelineBuild(resolve, options);
 
     return [styles, types, js].flat().filter((build) => !!build);
   }
 
+  // only needed for playwright!
+  options.alias = {
+    ...getOverlappingPackageNameAliases(),
+    ...options.alias,
+  };
+
   return [pipelineDev(resolve, options)];
 };
 

local/rollup/src/defaultOptions.js

@@ -4,7 +4,6 @@ module.exports = {
   verbose: false,
   banner: null,
   paths: {
-    src: './src',
     dist: './dist',
     types: './types',
     styles: './styles',

local/rollup/src/pipeline.build.js

@@ -34,7 +34,7 @@ module.exports = (resolve, options) => {
   const { rollup, paths, versions, alias, extractStyles, banner } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { name, file, globals, exports, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
-  const { src: srcPath, dist: distPath } = paths;
+  const { dist: distPath } = paths;
   const sourcemap = rawSourcemap;
 
   return versions
@@ -70,8 +70,8 @@ module.exports = (resolve, options) => {
           rollupLicense(banner, sourcemap),
           rollupAlias(alias),
           rollupScss(banner, sourcemap, extractStyles, false),
-          rollupTs(srcPath),
+          rollupTs(input),
-          rollupResolve(srcPath, resolve),
+          rollupResolve(resolve),
           rollupCommonjs(sourcemap, resolve),
           rollupBabel(resolve, generatedCode === 'es2015'),
           ...plugins,

local/rollup/src/pipeline.common.plugins.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const sass = require('sass');
 const postcss = require('postcss');
 const autoprefixer = require('autoprefixer');
@@ -13,6 +14,9 @@ const rollupPluginLicense = require('rollup-plugin-license');
 const babelConfigEs5 = require('./babel.config.es5');
 const babelConfigEs6 = require('./babel.config.es2015');
 
+const normalizePath = (pathName) =>
+  pathName ? pathName.split(path.sep).join(path.posix.sep) : pathName;
+
 module.exports = {
   rollupAlias: (aliasEntries) =>
     rollupPluginAlias({
@@ -23,12 +27,12 @@ module.exports = {
       sourceMap: sourcemap,
       extensions: resolve.extensions,
     }),
-  rollupResolve: (srcPath, resolve) =>
+  rollupResolve: (resolve) =>
     rollupPluginResolve({
       mainFields: ['browser', 'umd:main', 'module', 'main'],
-      rootDir: srcPath,
       moduleDirectories: resolve.directories,
       extensions: resolve.extensions,
+      ignoreSideEffectsForRoot: true,
     }),
   rollupScss: (banner, sourceMap, extractStyleOption, output) => {
     if (extractStyleOption) {
@@ -56,7 +60,6 @@ module.exports = {
   rollupEsBuild: () =>
     rollupPluginEsBuild({
       include: /\.[jt]sx?$/,
-      sourceMap: true,
       target: 'es6',
       tsconfig: './tsconfig.json',
     }),
@@ -89,7 +92,7 @@ module.exports = {
       },
       extensions: resolve.extensions,
     }),
-  rollupTs: (srcPath, declaration) =>
+  rollupTs: (input, declaration) =>
     rollupPluginTs({
       tsconfigOverride: {
         compilerOptions: {
@@ -98,7 +101,7 @@ module.exports = {
           declarationMap: declaration,
         },
         // files to include / exclude from typescript .d.ts generation
-        include: [`${srcPath}/**/*`],
+        include: [`${normalizePath(path.dirname(path.resolve(input)))}/**/*`],
         exclude: ['node_modules', '**/node_modules/*', '*.d.ts', '**/*.d.ts'],
       },
       clean: true,

local/rollup/src/pipeline.dev.js

@@ -11,7 +11,7 @@ module.exports = (resolve, options) => {
   const { rollup, paths, alias, extractStyles, banner } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { file, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
-  const { src: srcPath, dist: distPath } = paths;
+  const { dist: distPath } = paths;
   const sourcemap = rawSourcemap;
 
   const output = {
@@ -30,8 +30,8 @@ module.exports = (resolve, options) => {
       rollupAlias(alias),
       rollupScss(banner, sourcemap, extractStyles, false),
       rollupEsBuild(),
-      rollupResolve(srcPath, resolve),
       rollupCommonjs(sourcemap, resolve),
+      rollupResolve(resolve),
       ...plugins,
     ].filter(Boolean),
   };

local/rollup/src/pipeline.styles.js

@@ -1,19 +1,27 @@
 const path = require('path');
-const { rollupResolve, rollupScss, rollupEsBuild } = require('./pipeline.common.plugins');
+const {
+  rollupAlias,
+  rollupResolve,
+  rollupCommonjs,
+  rollupScss,
+  rollupTs,
+} = require('./pipeline.common.plugins');
 
 module.exports = (resolve, options) => {
-  const { rollup, paths, banner } = options;
+  const { rollup, alias, paths, banner } = options;
   const { output: rollupOutput, input } = rollup;
   const { file, sourcemap } = rollupOutput;
-  const { src: srcPath, styles: stylesPath } = paths;
+  const { styles: stylesPath } = paths;
   const ogWrite = process.stdout.write;
 
   return {
     input,
     plugins: [
-      rollupResolve(srcPath, resolve),
+      rollupAlias(alias),
       rollupScss(banner, sourcemap, true, path.resolve(stylesPath, `${file}.css`)),
-      rollupEsBuild(),
+      rollupTs(input),
+      rollupResolve(resolve),
+      rollupCommonjs(sourcemap, resolve),
       {
         generateBundle() {
           process.stdout.write = () => {

local/rollup/src/pipeline.types.js

@@ -8,7 +8,7 @@ module.exports = (resolve, options) => {
   const { rollup, paths } = options;
   const { output: rollupOutput, input } = rollup;
   const { file } = rollupOutput;
-  const { src: srcPath, types: typesPath } = paths;
+  const { types: typesPath } = paths;
   const dtsOutput = path.resolve(typesPath, `${file}.d.ts`);
 
   return [
@@ -22,7 +22,7 @@ module.exports = (resolve, options) => {
       output: {
         file: path.resolve(typesPath, `${file}`),
       },
-      plugins: [rollupTs(srcPath, true)],
+      plugins: [rollupTs(input, true)],
     },
     {
       input: path.join(typesPath, `${basename(input).replace('.ts', '.d.ts')}`),

local/rollup/src/playwright/createPlaywrightRollupConfig.js

@@ -33,7 +33,6 @@ module.exports = (testDir, mode = 'dev', onListening = null) => {
     banner: `${testDir}`,
     paths: {
       dist,
-      src: path.resolve(testDir, './'),
     },
     versions: [
       {

package-lock.json

@@ -22,7 +22,7 @@
         "@playwright/test": "^1.22.2",
         "@rollup/plugin-alias": "^3.1.9",
         "@rollup/plugin-babel": "^5.3.1",
-        "@rollup/plugin-commonjs": "^22.0.0",
+        "@rollup/plugin-commonjs": "^22.0.2",
         "@rollup/plugin-html": "^0.2.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@testing-library/dom": "^7.26.3",
@@ -2381,9 +2381,10 @@
       }
     },
     "node_modules/@rollup/plugin-commonjs": {
-      "version": "22.0.0",
+      "version": "22.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.2.tgz",
+      "integrity": "sha512-//NdP6iIwPbMTcazYsiBMbJW7gfmpHom33u1beiIoHDEM0Q9clvtQB1T0efvMqHeKsGohiHo97BCPCkBXdscwg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^3.1.0",
         "commondir": "^1.0.1",
@@ -12109,7 +12110,9 @@
       }
     },
     "@rollup/plugin-commonjs": {
-      "version": "22.0.0",
+      "version": "22.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.2.tgz",
+      "integrity": "sha512-//NdP6iIwPbMTcazYsiBMbJW7gfmpHom33u1beiIoHDEM0Q9clvtQB1T0efvMqHeKsGohiHo97BCPCkBXdscwg==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^3.1.0",

package.json

@@ -18,7 +18,7 @@
     "@playwright/test": "^1.22.2",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-html": "^0.2.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@testing-library/dom": "^7.26.3",

packages/overlayscrollbars/dist/browser/overlayscrollbars.browser.es5.js

@@ -1170,7 +1170,7 @@ var OverlayScrollbars = function(r) {
       content: false,
       scrollbarsSlot: true,
       cancel: {
-        nativeScrollbarsOverlaid: true,
+        nativeScrollbarsOverlaid: false,
         body: null
       }
     };
@@ -1229,13 +1229,13 @@ var OverlayScrollbars = function(r) {
   };
   var Cn = function cancelInitialization(r, a) {
     var n = r || {}, e = n.nativeScrollbarsOverlaid, t = n.body;
-    var i = a.Z, u = a.$;
+    var i = a.Z;
-    var f = wn(), l = f.U, c = f.H;
+    var u = wn(), f = u.U, l = u.H, c = u.T;
-    var s = l().cancel, d = s.nativeScrollbarsOverlaid, g = s.body;
+    var s = f().cancel, d = s.nativeScrollbarsOverlaid, g = s.body;
     var h = null != e ? e : d;
     var p = v(t) ? g : t;
-    var b = (c.x || c.y) && h;
+    var b = (l.x || l.y) && h;
-    var w = i && (o(p) ? !u : p);
+    var w = i && (o(p) ? !c : p);
     return !!b || !!w;
   };
   var On = new WeakMap;
@@ -1297,20 +1297,20 @@ var OverlayScrollbars = function(r) {
     var I = R && x;
     var V = !R && A.top === A && C.activeElement === w;
     var k = {
-      J: w,
+      $: w,
-      K: S ? P(Hn, o, d) : w,
+      J: S ? P(Hn, o, d) : w,
-      rr: M,
+      K: M,
-      ar: !R && z(Hn, f, g),
+      rr: !R && z(Hn, f, g),
-      nr: !R && z(Hn, l, p),
+      ar: !R && z(Hn, l, p),
-      er: !R && !e && i && i(a),
+      nr: !R && !e && i && i(a),
-      tr: I ? C.documentElement : M,
+      er: I ? C.documentElement : M,
-      ir: I ? C : M,
+      tr: I ? C : M,
-      vr: A,
+      ir: A,
-      ur: C,
+      vr: C,
-      lr: S,
+      ur: S,
       Z: x,
-      cr: c,
+      lr: c,
-      $: R,
+      cr: R,
       sr: function _viewportHasClass(r, a) {
         return R ? H(M, na, a) : gr(M, r);
       },
@@ -1325,7 +1325,7 @@ var OverlayScrollbars = function(r) {
     var U = function elementIsGenerated(r) {
       return r ? m(q, r) > -1 : null;
     };
-    var N = k.J, Z = k.K, $ = k.ar, J = k.rr, K = k.nr, Q = k.er;
+    var N = k.$, Z = k.J, $ = k.rr, J = k.K, K = k.ar, Q = k.nr;
     var rr = [];
     var ar = S && U(Z);
     var nr = S ? N : B([ K, J, $, Z, N ].find((function(r) {
@@ -1337,7 +1337,7 @@ var OverlayScrollbars = function(r) {
       var a = pr($, ua);
       var n = pr(J, !R && fa);
       var t = pr(K, ca);
-      var i = I ? pr(F(w), sa) : Sr;
+      var i = x ? pr(F(w), sa) : Sr;
       if (ar) {
         G(N, Z);
         y(rr, (function() {
@@ -1388,7 +1388,7 @@ var OverlayScrollbars = function(r) {
     return [ k, tr, O.bind(0, rr) ];
   };
   var In = function createTrinsicUpdateSegment(r, a) {
-    var n = r.nr;
+    var n = r.ar;
     var e = a[0];
     return function(r) {
       var a = wn(), t = a.F;
@@ -1408,7 +1408,7 @@ var OverlayScrollbars = function(r) {
   };
   var Vn = function createPaddingUpdateSegment(r, n) {
     var e = n[0], t = n[1];
-    var i = r.K, v = r.ar, o = r.rr, u = r.$;
+    var i = r.J, v = r.rr, o = r.K, u = r.cr;
     var f = a({
       u: mr,
       o: Lr()
@@ -1448,7 +1448,7 @@ var OverlayScrollbars = function(r) {
         style(v || o, H);
         style(o, D);
         t({
-          ar: f,
+          rr: f,
           mr: !z,
           R: v ? D : A({}, H, D)
         });
@@ -1496,7 +1496,7 @@ var OverlayScrollbars = function(r) {
   };
   var Xn = function createOverflowUpdateSegment(r, n) {
     var e = n[0], t = n[1];
-    var i = r.K, v = r.ar, o = r.rr, u = r.er, f = r.$, l = r.dr, c = r.Z, s = r.vr;
+    var i = r.J, v = r.rr, o = r.K, u = r.nr, f = r.cr, l = r.dr, c = r.Z, s = r.ir;
     var d = wn(), g = d.j, h = d.F, p = d.T, b = d.H;
     var w = Ia()[cn];
     var m = !f && !p && (b.x || b.y);
@@ -1511,7 +1511,7 @@ var OverlayScrollbars = function(r) {
         height: ""
       });
       if (a) {
-        var n = e(), t = n.mr, v = n.ar;
+        var n = e(), t = n.mr, v = n.rr;
         var u = r.Sr, f = r.I;
         var l = Vr(i);
         var c = Rr(i);
@@ -1707,7 +1707,7 @@ var OverlayScrollbars = function(r) {
     return e;
   };
   var $n = function createStructureSetupUpdate(r, a) {
-    var n = r.J, e = r.rr, t = r.dr, i = r.$;
+    var n = r.$, e = r.K, t = r.dr, i = r.cr;
     var v = wn(), o = v.T, u = v.H, f = v.F;
     var l = !o && (u.x || u.y);
     var c = [ In(r, a), Vn(r, a), Xn(r, a) ];
@@ -2040,7 +2040,7 @@ var OverlayScrollbars = function(r) {
     var i;
     var v;
     var o = n[1];
-    var u = r.K, c = r.rr, g = r.nr, h = r.lr, p = r.$, b = r.sr, w = r.dr;
+    var u = r.J, c = r.K, g = r.ar, h = r.ur, p = r.cr, b = r.sr, w = r.dr;
     var S = wn(), C = S.F;
     var O = a({
       u: br,
@@ -2233,7 +2233,7 @@ var OverlayScrollbars = function(r) {
     y: 0
   };
   var ce = {
-    ar: {
+    rr: {
       t: 0,
       r: 0,
       b: 0,
@@ -2285,7 +2285,7 @@ var OverlayScrollbars = function(r) {
       i("u", r);
     };
     y.qr = function() {
-      var r = l.J, a = l.rr;
+      var r = l.$, a = l.K;
       var n = M(r);
       var e = R(r);
       b();
@@ -2411,7 +2411,7 @@ var OverlayScrollbars = function(r) {
   var Ee = function createScrollbarsSetupElements(r, a, n) {
     var e = wn(), t = e.U;
     var i = t(), v = i.scrollbarsSlot;
-    var o = a.ur, u = a.J, f = a.K, l = a.rr, s = a.cr, d = a.tr;
+    var o = a.vr, u = a.$, f = a.J, l = a.K, s = a.lr, d = a.er;
     var g = s ? {} : r, h = g.scrollbarsSlot;
     var p = Sn([ u, f, l ], (function() {
       return f;
@@ -2538,7 +2538,7 @@ var OverlayScrollbars = function(r) {
       return u;
     })), E = x[0], A = x[1];
     var P = Ee(r, n.Ur, we(a, n)), z = P[0], L = P[1], T = P[2];
-    var H = n.Ur, D = H.K, I = H.rr, V = H.tr, k = H.ir, j = H.$, B = H.Z;
+    var H = n.Ur, D = H.J, I = H.K, V = H.er, k = H.tr, j = H.cr, B = H.Z;
     var q = z.$r, U = z.ra, N = z.Zr, Y = z.Gr, W = z.Xr;
     var G = q.Qr;
     var X = U.Qr;
@@ -2693,7 +2693,7 @@ var OverlayScrollbars = function(r) {
           r && a && w(r, a);
         },
         state: function state() {
-          var r = C(), a = r.Er, n = r.Ar, e = r.Cr, t = r.Pr, i = r.ar, v = r.mr, o = r.br;
+          var r = C(), a = r.Er, n = r.Ar, e = r.Cr, t = r.Pr, i = r.rr, v = r.mr, o = r.br;
           return A({}, {
             overflowEdge: a,
             overflowAmount: n,
@@ -2706,7 +2706,7 @@ var OverlayScrollbars = function(r) {
           });
         },
         elements: function elements() {
-          var r = C.Ur, a = r.J, n = r.K, e = r.ar, t = r.rr, i = r.nr, v = r.tr, o = r.ir;
+          var r = C.Ur, a = r.$, n = r.J, e = r.rr, t = r.K, i = r.ar, v = r.er, o = r.tr;
           var u = L.Ur, f = u.$r, l = u.ra;
           var c = function translateScrollbarStructure(r) {
             var a = r.Nr, n = r.Yr, e = r.Wr;
@@ -2814,4 +2814,4 @@ var OverlayScrollbars = function(r) {
   });
   return r;
 }({});
-//# sourceMappingURL=overlayscrollbars.es5.js.map
+//# sourceMappingURL=overlayscrollbars.browser.es5.js.map

packages/overlayscrollbars/dist/overlayscrollbars.cjs.js

@@ -755,9 +755,9 @@ const O = `${C}-overflow-x`;
 
 const E = `${C}-overflow-y`;
 
-const T = "overflowVisible";
+const A = "overflowVisible";
 
-const A = "scrollbarHidden";
+const T = "scrollbarHidden";
 
 const z = "updating";
 
@@ -882,7 +882,7 @@ const gt = "__osSizeObserverPlugin";
 
 const vt = {
   [gt]: {
-    T: (t, n, o) => {
+    A: (t, n, o) => {
       const s = createDOM(`<div class="${j}" dir="ltr"><div class="${j}"><div class="${Y}"></div></div><div class="${j}"><div class="${Y}" style="width: 200%; height: 200%"></div></div></div>`);
       appendChildren(t, s);
       addClass(t, V);
@@ -952,7 +952,7 @@ const yt = "__osScrollbarsHidingPlugin";
 
 const mt = {
   [yt]: {
-    A: t => {
+    T: t => {
       const {I: n, L: o, H: s} = t;
       const e = !s && !n && (o.x || o.y);
       const c = e ? document.createElement("style") : false;
@@ -1153,7 +1153,7 @@ const createEnvironment = () => {
     content: false,
     scrollbarsSlot: true,
     cancel: {
-      nativeScrollbarsOverlaid: true,
+      nativeScrollbarsOverlaid: false,
       body: null
     }
   };
@@ -1213,13 +1213,13 @@ const dynamicInitializationElement = (t, n, o, s) => {
 
 const cancelInitialization = (t, n) => {
   const {nativeScrollbarsOverlaid: o, body: s} = t || {};
-  const {X: e, J: c} = n;
+  const {X: e} = n;
-  const {q: r, L: i} = getEnvironment();
+  const {q: c, L: r, I: i} = getEnvironment();
-  const {nativeScrollbarsOverlaid: l, body: a} = r().cancel;
+  const {nativeScrollbarsOverlaid: l, body: a} = c().cancel;
   const u = null != o ? o : l;
   const d = isUndefined(s) ? a : s;
-  const f = (i.x || i.y) && u;
+  const f = (r.x || r.y) && u;
-  const _ = e && (isNull(d) ? !c : d);
+  const _ = e && (isNull(d) ? !i : d);
   return !!f || !!_;
 };
 
@@ -1264,7 +1264,7 @@ const createStructureSetupElements = t => {
   const n = getEnvironment();
   const {q: o, I: s} = n;
   const e = getPlugins()[yt];
-  const c = e && e.A;
+  const c = e && e.T;
   const {host: r, viewport: i, padding: l, content: a} = o();
   const u = isHTMLElement(t);
   const d = u ? {} : t;
@@ -1278,23 +1278,23 @@ const createStructureSetupElements = t => {
   const S = dynamicInitializationElement.bind(0, [ v ]);
   const x = m(Ct, i, h);
   const $ = x === v;
-  const T = $ && b;
+  const A = $ && b;
-  const A = !$ && y.top === y && p.activeElement === v;
+  const T = !$ && y.top === y && p.activeElement === v;
   const z = {
-    K: v,
+    J: v,
-    Z: w ? m(Ct, r, f) : v,
+    K: w ? m(Ct, r, f) : v,
-    tt: x,
+    Z: x,
-    nt: !$ && S(Ct, l, _),
+    tt: !$ && S(Ct, l, _),
-    ot: !$ && S(Ct, a, g),
+    nt: !$ && S(Ct, a, g),
-    st: !$ && !s && c && c(n),
+    ot: !$ && !s && c && c(n),
-    et: T ? p.documentElement : x,
+    st: A ? p.documentElement : x,
-    ct: T ? p : x,
+    et: A ? p : x,
-    rt: y,
+    ct: y,
-    it: p,
+    rt: p,
-    lt: w,
+    it: w,
     X: b,
-    ut: u,
+    lt: u,
-    J: $,
+    ut: $,
     dt: (t, n) => $ ? hasAttrClass(x, C, n) : hasClass(x, t),
     ft: (t, n, o) => $ ? attrClass(x, C, n, o) : (o ? addClass : removeClass)(x, t)
   };
@@ -1303,7 +1303,7 @@ const createStructureSetupElements = t => {
     return push(t, o && !parent(o) ? o : false);
   }), []);
   const elementIsGenerated = t => t ? indexOf(H, t) > -1 : null;
-  const {K: M, Z: R, nt: k, tt: B, ot: V, st: j} = z;
+  const {J: M, K: R, tt: k, Z: B, nt: V, ot: j} = z;
   const Y = [];
   const q = w && elementIsGenerated(R);
   let F = w ? M : contents([ V, B, k, R, M ].find((t => false === elementIsGenerated(t))));
@@ -1313,7 +1313,7 @@ const createStructureSetupElements = t => {
     const n = addClass(k, I);
     const o = addClass(B, !$ && L);
     const e = addClass(V, P);
-    const c = T ? addClass(parent(v), D) : noop;
+    const c = b ? addClass(parent(v), D) : noop;
     if (q) {
       insertAfter(M, R);
       push(Y, (() => {
@@ -1350,7 +1350,7 @@ const createStructureSetupElements = t => {
       insertBefore(B, j);
       push(Y, removeElements.bind(0, j));
     }
-    if (A) {
+    if (T) {
       const t = attr(B, $t);
       attr(B, $t, "-1");
       B.focus();
@@ -1365,7 +1365,7 @@ const createStructureSetupElements = t => {
 };
 
 const createTrinsicUpdateSegment = (t, n) => {
-  const {ot: o} = t;
+  const {nt: o} = t;
   const [s] = n;
   return t => {
     const {j: n} = getEnvironment();
@@ -1386,7 +1386,7 @@ const createTrinsicUpdateSegment = (t, n) => {
 
 const createPaddingUpdateSegment = (t, n) => {
   const [o, s] = n;
-  const {Z: e, nt: c, tt: r, J: i} = t;
+  const {K: e, tt: c, Z: r, ut: i} = t;
   const [l, a] = createCache({
     _: equalTRBL,
     u: topRightBottomLeft()
@@ -1424,7 +1424,7 @@ const createPaddingUpdateSegment = (t, n) => {
       style(c || r, e);
       style(r, i);
       s({
-        nt: u,
+        tt: u,
         yt: !t,
         D: c ? i : assignDeep({}, e, i)
       });
@@ -1439,9 +1439,9 @@ const {max: Ot} = Math;
 
 const Et = Ot.bind(0, 0);
 
-const Tt = "visible";
+const At = "visible";
 
-const At = "hidden";
+const Tt = "hidden";
 
 const zt = 42;
 
@@ -1456,8 +1456,8 @@ const It = {
 const Lt = {
   _: equalXY,
   u: {
-    x: At,
+    x: Tt,
-    y: At
+    y: Tt
   }
 };
 
@@ -1475,11 +1475,11 @@ const getOverflowAmount = (t, n) => {
 
 const conditionalClass = (t, n, o) => o ? addClass(t, n) : removeClass(t, n);
 
-const overflowIsVisible = t => 0 === t.indexOf(Tt);
+const overflowIsVisible = t => 0 === t.indexOf(At);
 
 const createOverflowUpdateSegment = (t, n) => {
   const [o, s] = n;
-  const {Z: e, nt: c, tt: r, st: i, J: l, ft: a, X: u, rt: d} = t;
+  const {K: e, tt: c, Z: r, ot: i, ut: l, ft: a, X: u, ct: d} = t;
   const {B: f, j: _, I: h, L: g} = getEnvironment();
   const v = getPlugins()[yt];
   const w = !l && !h && (g.x || g.y);
@@ -1494,7 +1494,7 @@ const createOverflowUpdateSegment = (t, n) => {
       height: ""
     });
     if (n) {
-      const {yt: n, nt: s} = o();
+      const {yt: n, tt: s} = o();
       const {xt: c, M: i} = t;
       const l = fractionalSize(e);
       const a = clientSize(e);
@@ -1541,7 +1541,7 @@ const createOverflowUpdateSegment = (t, n) => {
   const setViewportOverflowState = (t, n, o, s) => {
     const setAxisOverflowStyle = (t, n) => {
       const o = overflowIsVisible(t);
-      const s = n && o && t.replace(`${Tt}-`, "") || "";
+      const s = n && o && t.replace(`${At}-`, "") || "";
       return [ n && !o ? t : "", overflowIsVisible(s) ? "hidden" : s ];
     };
     const [e, c] = setAxisOverflowStyle(o.x, n.x);
@@ -1586,7 +1586,7 @@ const createOverflowUpdateSegment = (t, n) => {
     let Q = I(i);
     let tt;
     if (Y && h) {
-      a(D, A, !G);
+      a(D, T, !G);
     }
     if (N) {
       tt = getViewportOverflowState(G);
@@ -1594,7 +1594,7 @@ const createOverflowUpdateSegment = (t, n) => {
     }
     if (u || w || v || k || Y) {
       if (X) {
-        a(M, T, false);
+        a(M, A, false);
       }
       const [t, n] = P(G, V, tt);
       const [o, s] = J = b(i);
@@ -1651,7 +1651,7 @@ const createOverflowUpdateSegment = (t, n) => {
         style(r, t);
       }
     }
-    attrClass(e, C, T, ut);
+    attrClass(e, C, A, ut);
     conditionalClass(c, M, ut);
     !l && conditionalClass(r, M, X);
     const [dt, ft] = L(getViewportOverflowState(G).$t);
@@ -1665,10 +1665,10 @@ const createOverflowUpdateSegment = (t, n) => {
         x: st.w,
         y: st.h
       },
-      Tt: at
+      At: at
     });
     return {
-      At: ft,
+      Tt: ft,
       zt: ot,
       It: et
     };
@@ -1688,7 +1688,7 @@ const prepareUpdateHints = (t, n, o) => {
 };
 
 const createStructureSetupUpdate = (t, n) => {
-  const {K: o, tt: s, ft: e, J: c} = t;
+  const {J: o, Z: s, ft: e, ut: c} = t;
   const {I: r, L: i, j: l} = getEnvironment();
   const a = !r && (i.x || i.y);
   const u = [ createTrinsicUpdateSegment(t, n), createPaddingUpdateSegment(t, n), createOverflowUpdateSegment(t, n) ];
@@ -1700,7 +1700,7 @@ const createStructureSetupUpdate = (t, n) => {
       ht: false,
       zt: false,
       It: false,
-      At: false,
+      Tt: false,
       Ct: false,
       vt: false
     }, n), {}, r);
@@ -1784,7 +1784,7 @@ const createSizeObserver = (t, n, o) => {
         t.disconnect();
       }));
     } else if (c) {
-      const [t, n] = c.T(a, onSizeChangedCallbackProxy, e);
+      const [t, n] = c.A(a, onSizeChangedCallbackProxy, e);
       h = t;
       push(_, n);
     }
@@ -2020,7 +2020,7 @@ const createStructureSetupObservers = (t, n, o) => {
   let e;
   let c;
   const [, r] = n;
-  const {Z: i, tt: l, ot: a, lt: d, J: f, dt: _, ft: h} = t;
+  const {K: i, Z: l, nt: a, it: d, ut: f, dt: _, ft: h} = t;
   const {j: g} = getEnvironment();
   const [v] = createCache({
     _: equalWH,
@@ -2029,17 +2029,17 @@ const createStructureSetupObservers = (t, n, o) => {
       h: 0
     }
   }, (() => {
-    const t = _(M, T);
+    const t = _(M, A);
     const n = _(H, "");
     const o = n && scrollLeft(l);
     const s = n && scrollTop(l);
-    h(M, T);
+    h(M, A);
     h(H, "");
     h("", z, true);
     const e = scrollSize(a);
     const c = scrollSize(l);
     const r = fractionalSize(l);
-    h(M, T, t);
+    h(M, A, t);
     h(H, "", n);
     h("", z);
     scrollLeft(l, o);
@@ -2208,7 +2208,7 @@ const Bt = {
 };
 
 const Vt = {
-  nt: {
+  tt: {
     t: 0,
     r: 0,
     b: 0,
@@ -2230,7 +2230,7 @@ const Vt = {
     x: "hidden",
     y: "hidden"
   },
-  Tt: {
+  At: {
     x: false,
     y: false
   },
@@ -2259,7 +2259,7 @@ const createStructureSetup = (t, n) => {
     e("u", t);
   };
   v.Yt = () => {
-    const {K: t, tt: n} = l;
+    const {J: t, Z: n} = l;
     const o = scrollLeft(t);
     const s = scrollTop(t);
     _();
@@ -2386,7 +2386,7 @@ const getScrollbarHandleOffsetRatio = (t, n, o, s, e, c) => {
 const createScrollbarsSetupElements = (t, n, o) => {
   const {q: s} = getEnvironment();
   const {scrollbarsSlot: e} = s();
-  const {it: c, K: r, Z: i, tt: l, ut: a, et: u} = n;
+  const {rt: c, J: r, K: i, Z: l, lt: a, st: u} = n;
   const {scrollbarsSlot: d} = a ? {} : t;
   const f = dynamicInitializationElement([ r, i, l ], (() => i), e, d);
   const scrollbarStructureAddRemoveClass = (t, n, o) => {
@@ -2509,13 +2509,13 @@ const createScrollbarsSetup = (t, n, o) => {
   const [w, p] = createSelfCancelTimeout(100);
   const [b, y] = createSelfCancelTimeout((() => l));
   const [m, S, x] = createScrollbarsSetupElements(t, o.qt, createScrollbarsSetupEvents(n, o));
-  const {Z: $, tt: C, et: O, ct: E, J: T, X: A} = o.qt;
+  const {K: $, Z: C, st: O, et: E, ut: A, X: T} = o.qt;
   const {Jt: z, tn: I, Xt: L, Ut: H, Wt: P} = m;
   const {Qt: D} = z;
   const {Qt: M} = I;
   const styleScrollbarPosition = t => {
     const {Nt: n} = t;
-    const o = T && !A && parent(n) === C && n;
+    const o = A && !T && parent(n) === C && n;
     return [ o, {
       transform: o ? `translate(${scrollLeft(O)}px, ${scrollTop(O)}px)` : ""
     } ];
@@ -2558,14 +2558,14 @@ const createScrollbarsSetup = (t, n, o) => {
         c && !r && manageScrollbarsAutoHide(false);
       }));
     }));
-    T && D(styleScrollbarPosition);
+    A && D(styleScrollbarPosition);
-    T && M(styleScrollbarPosition);
+    A && M(styleScrollbarPosition);
   })) ];
   const k = u.bind(0);
   k.qt = m;
   k.Yt = S;
   return [ (t, r, a) => {
-    const {zt: u, It: d, At: f, bt: _} = a;
+    const {zt: u, It: d, Tt: f, bt: _} = a;
     const h = createOptionCheck(n, t, r);
     const g = o();
     const {Et: v, $t: w, wt: p} = g;
@@ -2574,7 +2574,7 @@ const createScrollbarsSetup = (t, n, o) => {
     const [x, $] = h("scrollbars.autoHide");
     const [C] = h("scrollbars.autoHideDelay");
     const [O, E] = h("scrollbars.dragScroll");
-    const [T, z] = h("scrollbars.clickScroll");
+    const [A, z] = h("scrollbars.clickScroll");
     const I = u || d || _ || r;
     const D = f || S || r;
     const setScrollbarVisibility = (t, n) => {
@@ -2598,7 +2598,7 @@ const createScrollbarsSetup = (t, n, o) => {
       L(st, O);
     }
     if (z) {
-      L(ot, T);
+      L(ot, A);
     }
     if (D) {
       const t = setScrollbarVisibility(w.x, true);
@@ -2611,7 +2611,7 @@ const createScrollbarsSetup = (t, n, o) => {
       P(g);
       L(tt, !v.x, true);
       L(tt, !v.y, false);
-      L(G, p && !A);
+      L(G, p && !T);
     }
   }, k, runEachAndClear.bind(0, R) ];
 };
@@ -2627,7 +2627,7 @@ const OverlayScrollbars = (t, n, o) => {
     const a = c[ft];
     const validateOptions = t => {
       const n = t || {};
-      const o = a && a.T;
+      const o = a && a.A;
       return o ? o(n, true) : n;
     };
     const u = assignDeep({}, s(), validateOptions(n));
@@ -2663,7 +2663,7 @@ const OverlayScrollbars = (t, n, o) => {
         t && n && f(t, n);
       },
       state() {
-        const {Ot: t, Et: n, $t: o, Tt: s, nt: e, yt: c, wt: r} = g();
+        const {Ot: t, Et: n, $t: o, At: s, tt: e, yt: c, wt: r} = g();
         return assignDeep({}, {
           overflowEdge: t,
           overflowAmount: n,
@@ -2676,7 +2676,7 @@ const OverlayScrollbars = (t, n, o) => {
         });
       },
       elements() {
-        const {K: t, Z: n, nt: o, tt: s, ot: e, et: c, ct: r} = g.qt;
+        const {J: t, K: n, tt: o, Z: s, nt: e, st: c, et: r} = g.qt;
         const {Jt: i, tn: l} = p.qt;
         const translateScrollbarStructure = t => {
           const {Ft: n, Gt: o, Nt: s} = t;
@@ -2733,7 +2733,7 @@ const OverlayScrollbars = (t, n, o) => {
     addInstance(i, m);
     _("initialized", [ m ]);
     g.jt(((t, n, o) => {
-      const {gt: s, bt: e, ht: c, zt: r, It: i, At: l, vt: a, Ct: u} = t;
+      const {gt: s, bt: e, ht: c, zt: r, It: i, Tt: l, vt: a, Ct: u} = t;
       _("updated", [ m, {
         updateHints: {
           sizeChanged: s,

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -744,9 +744,9 @@ const O = `${C}-overflow-x`;
 
 const E = `${C}-overflow-y`;
 
-const T = "overflowVisible";
+const A = "overflowVisible";
 
-const A = "scrollbarHidden";
+const T = "scrollbarHidden";
 
 const z = "updating";
 
@@ -941,8 +941,8 @@ const yt = "__osScrollbarsHidingPlugin";
 
 const mt = {
   [yt]: {
-    T: t => {
+    A: t => {
-      const {A: n, I: o, L: s} = t;
+      const {T: n, I: o, L: s} = t;
       const e = !s && !n && (o.x || o.y);
       const c = e ? document.createElement("style") : false;
       if (c) {
@@ -1142,7 +1142,7 @@ const createEnvironment = () => {
     content: false,
     scrollbarsSlot: true,
     cancel: {
-      nativeScrollbarsOverlaid: true,
+      nativeScrollbarsOverlaid: false,
       body: null
     }
   };
@@ -1150,7 +1150,7 @@ const createEnvironment = () => {
   const _ = {
     k: l,
     I: u,
-    A: a,
+    T: a,
     L: "-1" === style(o, "zIndex"),
     B: getRtlScrollBehavior(o, s),
     V: getFlexboxGlue(o, s),
@@ -1202,13 +1202,13 @@ const dynamicInitializationElement = (t, n, o, s) => {
 
 const cancelInitialization = (t, n) => {
   const {nativeScrollbarsOverlaid: o, body: s} = t || {};
-  const {W: e, X: c} = n;
+  const {W: e} = n;
-  const {Y: r, I: i} = getEnvironment();
+  const {Y: c, I: r, T: i} = getEnvironment();
-  const {nativeScrollbarsOverlaid: l, body: a} = r().cancel;
+  const {nativeScrollbarsOverlaid: l, body: a} = c().cancel;
   const u = null != o ? o : l;
   const d = isUndefined(s) ? a : s;
-  const f = (i.x || i.y) && u;
+  const f = (r.x || r.y) && u;
-  const _ = e && (isNull(d) ? !c : d);
+  const _ = e && (isNull(d) ? !i : d);
   return !!f || !!_;
 };
 
@@ -1251,9 +1251,9 @@ const addDataAttrHost = (t, n) => {
 
 const createStructureSetupElements = t => {
   const n = getEnvironment();
-  const {Y: o, A: s} = n;
+  const {Y: o, T: s} = n;
   const e = getPlugins()[yt];
-  const c = e && e.T;
+  const c = e && e.A;
   const {host: r, viewport: i, padding: l, content: a} = o();
   const u = isHTMLElement(t);
   const d = u ? {} : t;
@@ -1267,23 +1267,23 @@ const createStructureSetupElements = t => {
   const S = dynamicInitializationElement.bind(0, [ v ]);
   const x = m(Ct, i, h);
   const $ = x === v;
-  const T = $ && b;
+  const A = $ && b;
-  const A = !$ && y.top === y && p.activeElement === v;
+  const T = !$ && y.top === y && p.activeElement === v;
   const z = {
-    J: v,
+    X: v,
-    K: w ? m(Ct, r, f) : v,
+    J: w ? m(Ct, r, f) : v,
-    Z: x,
+    K: x,
-    tt: !$ && S(Ct, l, _),
+    Z: !$ && S(Ct, l, _),
-    nt: !$ && S(Ct, a, g),
+    tt: !$ && S(Ct, a, g),
-    ot: !$ && !s && c && c(n),
+    nt: !$ && !s && c && c(n),
-    st: T ? p.documentElement : x,
+    ot: A ? p.documentElement : x,
-    et: T ? p : x,
+    st: A ? p : x,
-    ct: y,
+    et: y,
-    rt: p,
+    ct: p,
-    it: w,
+    rt: w,
     W: b,
-    lt: u,
+    it: u,
-    X: $,
+    lt: $,
     ut: (t, n) => $ ? hasAttrClass(x, C, n) : hasClass(x, t),
     dt: (t, n, o) => $ ? attrClass(x, C, n, o) : (o ? addClass : removeClass)(x, t)
   };
@@ -1292,7 +1292,7 @@ const createStructureSetupElements = t => {
     return push(t, o && !parent(o) ? o : false);
   }), []);
   const elementIsGenerated = t => t ? indexOf(H, t) > -1 : null;
-  const {J: M, K: R, tt: k, Z: B, nt: V, ot: j} = z;
+  const {X: M, J: R, Z: k, K: B, tt: V, nt: j} = z;
   const Y = [];
   const q = w && elementIsGenerated(R);
   let F = w ? M : contents([ V, B, k, R, M ].find((t => false === elementIsGenerated(t))));
@@ -1302,7 +1302,7 @@ const createStructureSetupElements = t => {
     const n = addClass(k, I);
     const o = addClass(B, !$ && L);
     const e = addClass(V, P);
-    const c = T ? addClass(parent(v), D) : noop;
+    const c = b ? addClass(parent(v), D) : noop;
     if (q) {
       insertAfter(M, R);
       push(Y, (() => {
@@ -1339,7 +1339,7 @@ const createStructureSetupElements = t => {
       insertBefore(B, j);
       push(Y, removeElements.bind(0, j));
     }
-    if (A) {
+    if (T) {
       const t = attr(B, $t);
       attr(B, $t, "-1");
       B.focus();
@@ -1354,7 +1354,7 @@ const createStructureSetupElements = t => {
 };
 
 const createTrinsicUpdateSegment = (t, n) => {
-  const {nt: o} = t;
+  const {tt: o} = t;
   const [s] = n;
   return t => {
     const {V: n} = getEnvironment();
@@ -1375,14 +1375,14 @@ const createTrinsicUpdateSegment = (t, n) => {
 
 const createPaddingUpdateSegment = (t, n) => {
   const [o, s] = n;
-  const {K: e, tt: c, Z: r, X: i} = t;
+  const {J: e, Z: c, K: r, lt: i} = t;
   const [l, a] = createCache({
     u: equalTRBL,
     o: topRightBottomLeft()
   }, topRightBottomLeft.bind(0, e, "padding", ""));
   return (t, n, e) => {
     let [u, d] = a(e);
-    const {A: f, V: _} = getEnvironment();
+    const {T: f, V: _} = getEnvironment();
     const {vt: h} = o();
     const {ht: g, gt: v, wt: w} = t;
     const [p, b] = n("paddingAbsolute");
@@ -1413,7 +1413,7 @@ const createPaddingUpdateSegment = (t, n) => {
       style(c || r, e);
       style(r, i);
       s({
-        tt: u,
+        Z: u,
         bt: !t,
         P: c ? i : assignDeep({}, e, i)
       });
@@ -1428,9 +1428,9 @@ const {max: Ot} = Math;
 
 const Et = Ot.bind(0, 0);
 
-const Tt = "visible";
+const At = "visible";
 
-const At = "hidden";
+const Tt = "hidden";
 
 const zt = 42;
 
@@ -1445,8 +1445,8 @@ const It = {
 const Lt = {
   u: equalXY,
   o: {
-    x: At,
+    x: Tt,
-    y: At
+    y: Tt
   }
 };
 
@@ -1464,12 +1464,12 @@ const getOverflowAmount = (t, n) => {
 
 const conditionalClass = (t, n, o) => o ? addClass(t, n) : removeClass(t, n);
 
-const overflowIsVisible = t => 0 === t.indexOf(Tt);
+const overflowIsVisible = t => 0 === t.indexOf(At);
 
 const createOverflowUpdateSegment = (t, n) => {
   const [o, s] = n;
-  const {K: e, tt: c, Z: r, ot: i, X: l, dt: a, W: u, ct: d} = t;
+  const {J: e, Z: c, K: r, nt: i, lt: l, dt: a, W: u, et: d} = t;
-  const {k: f, V: _, A: h, I: g} = getEnvironment();
+  const {k: f, V: _, T: h, I: g} = getEnvironment();
   const v = getPlugins()[yt];
   const w = !l && !h && (g.x || g.y);
   const p = u && l;
@@ -1483,7 +1483,7 @@ const createOverflowUpdateSegment = (t, n) => {
       height: ""
     });
     if (n) {
-      const {bt: n, tt: s} = o();
+      const {bt: n, Z: s} = o();
       const {St: c, D: i} = t;
       const l = fractionalSize(e);
       const a = clientSize(e);
@@ -1530,7 +1530,7 @@ const createOverflowUpdateSegment = (t, n) => {
   const setViewportOverflowState = (t, n, o, s) => {
     const setAxisOverflowStyle = (t, n) => {
       const o = overflowIsVisible(t);
-      const s = n && o && t.replace(`${Tt}-`, "") || "";
+      const s = n && o && t.replace(`${At}-`, "") || "";
       return [ n && !o ? t : "", overflowIsVisible(s) ? "hidden" : s ];
     };
     const [e, c] = setAxisOverflowStyle(o.x, n.x);
@@ -1575,7 +1575,7 @@ const createOverflowUpdateSegment = (t, n) => {
     let Q = I(i);
     let tt;
     if (Y && h) {
-      a(D, A, !G);
+      a(D, T, !G);
     }
     if (N) {
       tt = getViewportOverflowState(G);
@@ -1583,7 +1583,7 @@ const createOverflowUpdateSegment = (t, n) => {
     }
     if (u || w || v || k || Y) {
       if (X) {
-        a(M, T, false);
+        a(M, A, false);
       }
       const [t, n] = P(G, V, tt);
       const [o, s] = J = b(i);
@@ -1640,7 +1640,7 @@ const createOverflowUpdateSegment = (t, n) => {
         style(r, t);
       }
     }
-    attrClass(e, C, T, ut);
+    attrClass(e, C, A, ut);
     conditionalClass(c, M, ut);
     !l && conditionalClass(r, M, X);
     const [dt, ft] = L(getViewportOverflowState(G).xt);
@@ -1657,8 +1657,8 @@ const createOverflowUpdateSegment = (t, n) => {
       Et: at
     });
     return {
-      Tt: ft,
+      At: ft,
-      At: ot,
+      Tt: ot,
       zt: et
     };
   };
@@ -1677,8 +1677,8 @@ const prepareUpdateHints = (t, n, o) => {
 };
 
 const createStructureSetupUpdate = (t, n) => {
-  const {J: o, Z: s, dt: e, X: c} = t;
+  const {X: o, K: s, dt: e, lt: c} = t;
-  const {A: r, I: i, V: l} = getEnvironment();
+  const {T: r, I: i, V: l} = getEnvironment();
   const a = !r && (i.x || i.y);
   const u = [ createTrinsicUpdateSegment(t, n), createPaddingUpdateSegment(t, n), createOverflowUpdateSegment(t, n) ];
   return (t, n, r) => {
@@ -1687,9 +1687,9 @@ const createStructureSetupUpdate = (t, n) => {
       yt: false,
       wt: false,
       _t: false,
-      At: false,
-      zt: false,
       Tt: false,
+      zt: false,
+      At: false,
       $t: false,
       gt: false
     }, n), {}, r);
@@ -2009,7 +2009,7 @@ const createStructureSetupObservers = (t, n, o) => {
   let e;
   let c;
   const [, r] = n;
-  const {K: i, Z: l, nt: a, it: d, X: f, ut: _, dt: h} = t;
+  const {J: i, K: l, tt: a, rt: d, lt: f, ut: _, dt: h} = t;
   const {V: g} = getEnvironment();
   const [v] = createCache({
     u: equalWH,
@@ -2018,17 +2018,17 @@ const createStructureSetupObservers = (t, n, o) => {
       h: 0
     }
   }, (() => {
-    const t = _(M, T);
+    const t = _(M, A);
     const n = _(H, "");
     const o = n && scrollLeft(l);
     const s = n && scrollTop(l);
-    h(M, T);
+    h(M, A);
     h(H, "");
     h("", z, true);
     const e = scrollSize(a);
     const c = scrollSize(l);
     const r = fractionalSize(l);
-    h(M, T, t);
+    h(M, A, t);
     h(H, "", n);
     h("", z);
     scrollLeft(l, o);
@@ -2197,7 +2197,7 @@ const Bt = {
 };
 
 const Vt = {
-  tt: {
+  Z: {
     t: 0,
     r: 0,
     b: 0,
@@ -2248,7 +2248,7 @@ const createStructureSetup = (t, n) => {
     e("u", t);
   };
   v.jt = () => {
-    const {J: t, Z: n} = l;
+    const {X: t, K: n} = l;
     const o = scrollLeft(t);
     const s = scrollTop(t);
     _();
@@ -2375,7 +2375,7 @@ const getScrollbarHandleOffsetRatio = (t, n, o, s, e, c) => {
 const createScrollbarsSetupElements = (t, n, o) => {
   const {Y: s} = getEnvironment();
   const {scrollbarsSlot: e} = s();
-  const {rt: c, J: r, K: i, Z: l, lt: a, st: u} = n;
+  const {ct: c, X: r, J: i, K: l, it: a, ot: u} = n;
   const {scrollbarsSlot: d} = a ? {} : t;
   const f = dynamicInitializationElement([ r, i, l ], (() => i), e, d);
   const scrollbarStructureAddRemoveClass = (t, n, o) => {
@@ -2498,13 +2498,13 @@ const createScrollbarsSetup = (t, n, o) => {
   const [w, p] = createSelfCancelTimeout(100);
   const [b, y] = createSelfCancelTimeout((() => l));
   const [m, S, x] = createScrollbarsSetupElements(t, o.Yt, createScrollbarsSetupEvents(n, o));
-  const {K: $, Z: C, st: O, et: E, X: T, W: A} = o.Yt;
+  const {J: $, K: C, ot: O, st: E, lt: A, W: T} = o.Yt;
   const {Xt: z, Qt: I, Wt: L, Nt: H, Ut: P} = m;
   const {Zt: D} = z;
   const {Zt: M} = I;
   const styleScrollbarPosition = t => {
     const {Gt: n} = t;
-    const o = T && !A && parent(n) === C && n;
+    const o = A && !T && parent(n) === C && n;
     return [ o, {
       transform: o ? `translate(${scrollLeft(O)}px, ${scrollTop(O)}px)` : ""
     } ];
@@ -2547,14 +2547,14 @@ const createScrollbarsSetup = (t, n, o) => {
         c && !r && manageScrollbarsAutoHide(false);
       }));
     }));
-    T && D(styleScrollbarPosition);
+    A && D(styleScrollbarPosition);
-    T && M(styleScrollbarPosition);
+    A && M(styleScrollbarPosition);
   })) ];
   const k = u.bind(0);
   k.Yt = m;
   k.jt = S;
   return [ (t, r, a) => {
-    const {At: u, zt: d, Tt: f, wt: _} = a;
+    const {Tt: u, zt: d, At: f, wt: _} = a;
     const h = createOptionCheck(n, t, r);
     const g = o();
     const {Ot: v, xt: w, vt: p} = g;
@@ -2563,7 +2563,7 @@ const createScrollbarsSetup = (t, n, o) => {
     const [x, $] = h("scrollbars.autoHide");
     const [C] = h("scrollbars.autoHideDelay");
     const [O, E] = h("scrollbars.dragScroll");
-    const [T, z] = h("scrollbars.clickScroll");
+    const [A, z] = h("scrollbars.clickScroll");
     const I = u || d || _ || r;
     const D = f || S || r;
     const setScrollbarVisibility = (t, n) => {
@@ -2587,7 +2587,7 @@ const createScrollbarsSetup = (t, n, o) => {
       L(st, O);
     }
     if (z) {
-      L(ot, T);
+      L(ot, A);
     }
     if (D) {
       const t = setScrollbarVisibility(w.x, true);
@@ -2600,7 +2600,7 @@ const createScrollbarsSetup = (t, n, o) => {
       P(g);
       L(tt, !v.x, true);
       L(tt, !v.y, false);
-      L(G, p && !A);
+      L(G, p && !T);
     }
   }, k, runEachAndClear.bind(0, R) ];
 };
@@ -2652,7 +2652,7 @@ const OverlayScrollbars = (t, n, o) => {
         t && n && f(t, n);
       },
       state() {
-        const {Ct: t, Ot: n, xt: o, Et: s, tt: e, bt: c, vt: r} = g();
+        const {Ct: t, Ot: n, xt: o, Et: s, Z: e, bt: c, vt: r} = g();
         return assignDeep({}, {
           overflowEdge: t,
           overflowAmount: n,
@@ -2665,7 +2665,7 @@ const OverlayScrollbars = (t, n, o) => {
         });
       },
       elements() {
-        const {J: t, K: n, tt: o, Z: s, nt: e, st: c, et: r} = g.Yt;
+        const {X: t, J: n, Z: o, K: s, tt: e, ot: c, st: r} = g.Yt;
         const {Xt: i, Qt: l} = p.Yt;
         const translateScrollbarStructure = t => {
           const {qt: n, Ft: o, Gt: s} = t;
@@ -2722,7 +2722,7 @@ const OverlayScrollbars = (t, n, o) => {
     addInstance(i, m);
     _("initialized", [ m ]);
     g.Vt(((t, n, o) => {
-      const {ht: s, wt: e, _t: c, At: r, zt: i, Tt: l, gt: a, $t: u} = t;
+      const {ht: s, wt: e, _t: c, Tt: r, zt: i, At: l, gt: a, $t: u} = t;
       _("updated", [ m, {
         updateHints: {
           sizeChanged: s,
@@ -2752,7 +2752,7 @@ OverlayScrollbars.valid = t => {
 };
 
 OverlayScrollbars.env = () => {
-  const {k: t, I: n, A: o, B: s, V: e, L: c, N: r, U: i, Y: l, q: a, F: u, G: d} = getEnvironment();
+  const {k: t, I: n, T: o, B: s, V: e, L: c, N: r, U: i, Y: l, q: a, F: u, G: d} = getEnvironment();
   return assignDeep({}, {
     scrollbarsSize: t,
     scrollbarsOverlaid: n,

packages/overlayscrollbars/package.json

@@ -31,6 +31,15 @@
   "main": "dist/overlayscrollbars.cjs.js",
   "module": "dist/overlayscrollbars.esm.js",
   "types": "types/overlayscrollbars.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/overlayscrollbars.cjs.js",
+      "import": "./dist/overlayscrollbars.esm.js",
+      "types": "./types/overlayscrollbars.d.ts"
+    },
+    "./overlayscrollbars.css": "./styles/overlayscrollbars.css"
+  },
+  "sideEffects": false,
   "scripts": {
     "build": "rollup -c",
     "jest": "jest --coverage --runInBand --detectOpenHandles --testPathPattern",

packages/overlayscrollbars/src/environment.ts

@@ -159,7 +159,7 @@ const createEnvironment = (): InternalEnvironment => {
     content: false,
     scrollbarsSlot: true,
     cancel: {
-      nativeScrollbarsOverlaid: true,
+      nativeScrollbarsOverlaid: false,
       body: null,
     },
   };

packages/overlayscrollbars/src/initialization.ts

@@ -93,8 +93,9 @@ export const cancelInitialization = (
   structureSetupElements: StructureSetupElementsObj
 ): boolean => {
   const { nativeScrollbarsOverlaid, body } = cancelInitializationValue || {};
-  const { _isBody, _viewportIsTarget } = structureSetupElements;
+  const { _isBody } = structureSetupElements;
-  const { _getDefaultInitialization, _nativeScrollbarsOverlaid } = getEnvironment();
+  const { _getDefaultInitialization, _nativeScrollbarsOverlaid, _nativeScrollbarsHiding } =
+    getEnvironment();
   const { nativeScrollbarsOverlaid: defaultNativeScrollbarsOverlaid, body: defaultbody } =
     _getDefaultInitialization().cancel;
 
@@ -108,7 +109,7 @@ export const cancelInitialization = (
   const finalDocumentScrollingElement =
     _isBody &&
     (isNull(resolvedDocumentScrollingElement)
-      ? !_viewportIsTarget
+      ? !_nativeScrollbarsHiding
       : resolvedDocumentScrollingElement);
 
   return !!finalNativeScrollbarsOverlaid || !!finalDocumentScrollingElement;

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts

@@ -198,7 +198,7 @@ export const createStructureSetupElements = (
     const removePaddingClass = addClass(_padding, classNamePadding);
     const removeViewportClass = addClass(_viewport, !viewportIsTarget && classNameViewport);
     const removeContentClass = addClass(_content, classNameContent);
-    const removeHtmlClass = viewportIsTargetBody
+    const removeHtmlClass = isBody
       ? addClass(parent(targetElement), classNameViewportScrollbarHidden)
       : noop;