improve code

local/config/src/playwright.js

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

local/config/src/resolve.json

@@ -1,4 +1,5 @@
 {
   "extensions": [".json", ".js", "jsx", ".mjs", ".ts", ".tsx"],
-  "directories": ["node_modules", "src"]
+  "directories": ["node_modules", "src"],
+  "styleExtensions": [".scss", ".sass", ".css"]
 }

local/rollup/src/pipeline.build.js

@@ -69,7 +69,7 @@ module.exports = (resolve, options) => {
         plugins: [
           rollupLicense(banner, sourcemap),
           rollupAlias(alias),
-          rollupScss(banner, sourcemap, extractStyles, false),
+          rollupScss(resolve, sourcemap, extractStyles, false),
           rollupTs(input),
           rollupResolve(resolve),
           rollupCommonjs(sourcemap, resolve),

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

@@ -1,6 +1,7 @@
 const path = require('path');
 const sass = require('sass');
 const postcss = require('postcss');
+const cssnano = require('cssnano');
 const autoprefixer = require('autoprefixer');
 const { nodeResolve: rollupPluginResolve } = require('@rollup/plugin-node-resolve');
 const { babel: rollupBabelInputPlugin } = require('@rollup/plugin-babel');
@@ -27,15 +28,16 @@ module.exports = {
       sourceMap: sourcemap,
       extensions: resolve.extensions,
     }),
-  rollupResolve: (resolve) =>
+  rollupResolve: (resolve, resolveOnly) =>
     rollupPluginResolve({
       mainFields: ['browser', 'umd:main', 'module', 'main'],
       moduleDirectories: resolve.directories,
       extensions: resolve.extensions,
       ignoreSideEffectsForRoot: true,
+      ...(resolveOnly ? { resolveOnly } : {}),
     }),
-  rollupScss: (banner, sourceMap, extractStyleOption, output) => {
-    if (extractStyleOption) {
+  rollupScss: (resolve, sourceMap, extract, output, banner, minified) => {
+    if (extract) {
       return output
         ? rollupPluginScss({
             output,
@@ -49,10 +51,10 @@ module.exports = {
                   .map((line) => ` * ${line}\r\n`)
                   .join('')} */`
               : undefined,
-            processor: () => postcss([autoprefixer()]),
+            processor: () => postcss([autoprefixer()].concat(minified ? cssnano() : [])),
           })
         : rollupPluginIgnoreImport({
-            extensions: ['.scss', '.sass', '.css'],
+            extensions: resolve.styleExtensions,
             body: 'export default undefined;',
           });
     }
@@ -61,7 +63,6 @@ module.exports = {
     rollupPluginEsBuild({
       include: /\.[jt]sx?$/,
       target: 'es6',
-      tsconfig: './tsconfig.json',
     }),
   rollupBabel: (resolve, es6) =>
     rollupBabelInputPlugin({

local/rollup/src/pipeline.dev.js

@@ -8,7 +8,7 @@ const {
 } = require('./pipeline.common.plugins');
 
 module.exports = (resolve, options) => {
-  const { rollup, paths, alias, extractStyles, banner } = options;
+  const { rollup, paths, alias, extractStyles } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { file, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
   const { dist: distPath } = paths;
@@ -28,7 +28,7 @@ module.exports = (resolve, options) => {
     ...rollupOptions,
     plugins: [
       rollupAlias(alias),
-      rollupScss(banner, sourcemap, extractStyles, false),
+      rollupScss(resolve, sourcemap, extractStyles, false),
       rollupEsBuild(),
       rollupCommonjs(sourcemap, resolve),
       rollupResolve(resolve),

local/rollup/src/pipeline.styles.js

@@ -2,26 +2,33 @@ const path = require('path');
 const {
   rollupAlias,
   rollupResolve,
-  rollupCommonjs,
   rollupScss,
-  rollupTs,
+  rollupEsBuild,
 } = require('./pipeline.common.plugins');
 
 module.exports = (resolve, options) => {
-  const { rollup, alias, paths, banner } = options;
+  const { rollup, alias, paths, banner, extractStyles } = options;
   const { output: rollupOutput, input } = rollup;
   const { file, sourcemap } = rollupOutput;
   const { styles: stylesPath } = paths;
   const ogWrite = process.stdout.write;
 
-  return {
+  const pipeline = (cssFilename, minified) => ({
     input,
     plugins: [
       rollupAlias(alias),
-      rollupScss(banner, sourcemap, true, path.resolve(stylesPath, `${file}.css`)),
-      rollupTs(input),
-      rollupResolve(resolve),
-      rollupCommonjs(sourcemap, resolve),
+      rollupScss(
+        resolve,
+        sourcemap && !minified,
+        extractStyles,
+        path.resolve(stylesPath, cssFilename),
+        banner,
+        minified
+      ),
+      rollupEsBuild(),
+      rollupResolve(resolve, (module) =>
+        resolve.styleExtensions.some((ext) => module.endsWith(ext))
+      ),
       {
         generateBundle() {
           process.stdout.write = () => {
@@ -33,5 +40,7 @@ module.exports = (resolve, options) => {
         },
       },
     ],
-  };
+  });
+
+  return [pipeline(`${file}.css`), pipeline(`${file}.min.css`, true)];
 };

package-lock.json

@@ -31,6 +31,7 @@
         "@typescript-eslint/parser": "^5.31.0",
         "autoprefixer": "^10.4.7",
         "babel-jest": "^28.1.1",
+        "cssnano": "^5.1.12",
         "esbuild": "^0.14.42",
         "eslint": "^8.20.0",
         "eslint-config-airbnb": "^19.0.4",
@@ -3856,8 +3857,9 @@
     },
     "node_modules/cssnano": {
       "version": "5.1.12",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
+      "integrity": "sha512-TgvArbEZu0lk/dvg2ja+B7kYoD7BBCmn3+k58xD0qjrGHsFzXY/wKTo9M5egcUCabPol05e/PVoIu79s2JN4WQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "cssnano-preset-default": "^5.2.12",
         "lilconfig": "^2.0.3",
@@ -13058,6 +13060,8 @@
     },
     "cssnano": {
       "version": "5.1.12",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.12.tgz",
+      "integrity": "sha512-TgvArbEZu0lk/dvg2ja+B7kYoD7BBCmn3+k58xD0qjrGHsFzXY/wKTo9M5egcUCabPol05e/PVoIu79s2JN4WQ==",
       "dev": true,
       "requires": {
         "cssnano-preset-default": "^5.2.12",

package.json

@@ -27,6 +27,7 @@
     "@typescript-eslint/parser": "^5.31.0",
     "autoprefixer": "^10.4.7",
     "babel-jest": "^28.1.1",
+    "cssnano": "^5.1.12",
     "esbuild": "^0.14.42",
     "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",

packages/overlayscrollbars/package.json

@@ -45,7 +45,7 @@
     "jest": "jest --coverage --runInBand --detectOpenHandles --testPathPattern",
     "postjest": "full-coverage",
     "playwright": "playwright test --quiet",
-    "playwright:dev": "playwright test",
+    "playwright:dev": "playwright test --workers 1",
     "postplaywright": "playwright-merge-coverage && full-coverage"
   }
 }

packages/overlayscrollbars/styles/overlayscrollbars.css

@@ -0,0 +1,523 @@
+/*! 
+ * OverlayScrollbars
+ * Version: 2.0.0-beta.0
+ * 
+ * Copyright (c) Rene Haas | KingSora.
+ * https://github.com/KingSora
+ * 
+ * Released under the MIT license.
+ */
+.os-size-observer,
+.os-size-observer-listener {
+  direction: inherit;
+  pointer-events: none;
+  overflow: hidden;
+  visibility: hidden;
+  box-sizing: border-box;
+}
+
+.os-size-observer,
+.os-size-observer-listener,
+.os-size-observer-listener-item,
+.os-size-observer-listener-item-final {
+  writing-mode: horizontal-tb;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.os-size-observer {
+  z-index: -1;
+  contain: strict;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: inherit;
+  border: inherit;
+  box-sizing: inherit;
+  margin: -133px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: scale(0.1);
+}
+.os-size-observer::before {
+  content: "";
+  flex: none;
+  box-sizing: inherit;
+  padding: 10px;
+  width: 10px;
+  height: 10px;
+}
+
+.os-size-observer-appear {
+  -webkit-animation: os-size-observer-appear-animation 1ms forwards;
+          animation: os-size-observer-appear-animation 1ms forwards;
+}
+
+.os-size-observer-listener {
+  box-sizing: border-box;
+  position: relative;
+  flex: auto;
+  padding: inherit;
+  border: inherit;
+  margin: -133px;
+  transform: scale(10);
+}
+.os-size-observer-listener.ltr {
+  margin-right: -266px;
+  margin-left: 0;
+}
+.os-size-observer-listener.rtl {
+  margin-left: -266px;
+  margin-right: 0;
+}
+.os-size-observer-listener:empty::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+}
+.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
+  display: block;
+  position: relative;
+  padding: inherit;
+  border: inherit;
+  box-sizing: content-box;
+  flex: auto;
+}
+
+.os-size-observer-listener-scroll {
+  box-sizing: border-box;
+  display: flex;
+}
+
+.os-size-observer-listener-item {
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  direction: ltr;
+  flex: none;
+}
+
+.os-size-observer-listener-item-final {
+  transition: none;
+}
+
+@-webkit-keyframes os-size-observer-appear-animation {
+  from {
+    cursor: auto;
+  }
+  to {
+    cursor: none;
+  }
+}
+
+@keyframes os-size-observer-appear-animation {
+  from {
+    cursor: auto;
+  }
+  to {
+    cursor: none;
+  }
+}
+.os-trinsic-observer {
+  flex: none;
+  box-sizing: border-box;
+  position: relative;
+  max-width: 0px;
+  max-height: 1px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  overflow: hidden;
+  z-index: -1;
+  height: 0;
+  top: calc(100% + 1px);
+  contain: strict;
+}
+.os-trinsic-observer:not(:empty) {
+  height: calc(100% + 1px);
+  top: -1px;
+}
+.os-trinsic-observer:not(:empty) > .os-size-observer {
+  width: 1000%;
+  height: 1000%;
+  min-height: 1px;
+  min-width: 1px;
+}
+
+.os-environment {
+  --os-custom-prop: -1;
+  position: fixed;
+  opacity: 0;
+  visibility: hidden;
+  overflow: scroll;
+  height: 200px;
+  width: 200px;
+  z-index: var(--os-custom-prop);
+}
+.os-environment div {
+  width: 200%;
+  height: 200%;
+  margin: 10px 0;
+}
+.os-environment.os-environment-flexbox-glue {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: auto;
+  width: auto;
+  min-height: 200px;
+  min-width: 200px;
+}
+.os-environment.os-environment-flexbox-glue div {
+  flex: auto;
+  width: auto;
+  height: auto;
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+.os-environment.os-environment-flexbox-glue-max {
+  max-height: 200px;
+}
+.os-environment.os-environment-flexbox-glue-max div {
+  overflow: visible;
+}
+.os-environment.os-environment-flexbox-glue-max div::before {
+  content: "";
+  display: block;
+  height: 999px;
+  width: 999px;
+}
+
+.os-environment,
+.os-viewport {
+  -ms-overflow-style: scrollbar !important;
+}
+
+[data-overlayscrollbars=""],
+[data-overlayscrollbars~=scrollbarHidden],
+html.os-viewport-scrollbar-hidden,
+.os-viewport-scrollbar-hidden.os-environment,
+.os-viewport-scrollbar-hidden.os-viewport {
+  scrollbar-width: none !important;
+}
+
+[data-overlayscrollbars=""]::-webkit-scrollbar,
+[data-overlayscrollbars=""]::-webkit-scrollbar-corner,
+[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
+[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
+html.os-viewport-scrollbar-hidden::-webkit-scrollbar,
+html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner,
+.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar,
+.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar-corner,
+.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar,
+.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar-corner {
+  display: none !important;
+  width: 0px !important;
+  height: 0px !important;
+  visibility: hidden !important;
+  background: transparent !important;
+}
+
+html.os-viewport-scrollbar-hidden,
+html.os-viewport-scrollbar-hidden > body[data-overlayscrollbars] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+[data-overlayscrollbars~=host],
+.os-padding {
+  position: relative;
+}
+
+[data-overlayscrollbars~=host],
+.os-padding {
+  display: flex;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+}
+
+.os-padding,
+.os-viewport {
+  box-sizing: inherit;
+  position: relative;
+  flex: auto !important;
+  height: auto;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  z-index: 0;
+}
+
+.os-viewport {
+  --os-vaw: 0;
+  --os-vah: 0;
+}
+.os-viewport.os-viewport-arrange::before {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: -1;
+  min-width: 1px;
+  min-height: 1px;
+  width: var(--os-vaw);
+  height: var(--os-vah);
+}
+
+[data-overlayscrollbars~=host],
+[data-overlayscrollbars~=viewport] {
+  overflow: hidden !important;
+}
+
+[data-overlayscrollbars~=overflowVisible] {
+  overflow: visible !important;
+}
+
+[data-overlayscrollbars-overflow-x=hidden] {
+  overflow-x: hidden !important;
+}
+
+[data-overlayscrollbars-overflow-x=scroll] {
+  overflow-x: scroll !important;
+}
+
+[data-overlayscrollbars-overflow-x=hidden] {
+  overflow-y: hidden !important;
+}
+
+[data-overlayscrollbars-overflow-y=scroll] {
+  overflow-y: scroll !important;
+}
+
+.os-padding,
+.os-viewport {
+  overflow: hidden;
+}
+
+.os-overflow-visible {
+  overflow: visible;
+}
+
+.os-content {
+  box-sizing: inherit;
+}
+
+.os-scrollbar {
+  contain: strict;
+  transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
+  pointer-events: none;
+  position: absolute;
+  z-index: 99999;
+  opacity: 0;
+  visibility: hidden;
+}
+
+body > .os-scrollbar {
+  position: fixed;
+}
+
+.os-scrollbar-transitionless {
+  transition: none;
+}
+
+.os-scrollbar-track {
+  position: relative;
+  direction: ltr !important;
+  padding: 0 !important;
+  border: none !important;
+}
+
+.os-scrollbar-handle {
+  position: absolute;
+}
+
+.os-scrollbar-track,
+.os-scrollbar-handle {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+
+.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
+.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.os-scrollbar-horizontal {
+  bottom: 0;
+  left: 0;
+}
+
+.os-scrollbar-vertical {
+  top: 0;
+  right: 0;
+}
+
+.os-scrollbar-rtl.os-scrollbar-horizontal {
+  right: 0;
+}
+
+.os-scrollbar-rtl.os-scrollbar-vertical {
+  right: auto;
+  left: 0;
+}
+
+.os-scrollbar-visible,
+.os-scrollbar-interaction.os-scrollbar-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.os-scrollbar-auto-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.os-scrollbar-unusable,
+.os-scrollbar-unusable * {
+  pointer-events: none !important;
+}
+
+.os-scrollbar-unusable .os-scrollbar-handle {
+  opacity: 0 !important;
+}
+
+.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless {
+  left: 0;
+  right: 0;
+}
+
+.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless {
+  top: 0;
+  bottom: 0;
+}
+
+/* NONE THEME: */
+[data-overlayscrollbars~=updating] > .os-scrollbar,
+.os-theme-none.os-scrollbar {
+  display: none !important;
+}
+
+/* DARK & LIGHT THEME: */
+.os-theme-dark.os-scrollbar-horizontal,
+.os-theme-light.os-scrollbar-horizontal {
+  right: 10px;
+  height: 10px;
+}
+
+.os-theme-dark.os-scrollbar-vertical,
+.os-theme-light.os-scrollbar-vertical {
+  bottom: 10px;
+  width: 10px;
+}
+
+.os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
+.os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
+  left: 10px;
+  right: 0;
+}
+
+.os-theme-dark.os-scrollbar,
+.os-theme-light.os-scrollbar {
+  padding: 2px;
+  box-sizing: border-box;
+  background: transparent;
+}
+
+.os-theme-dark.os-scrollbar-unusable,
+.os-theme-light.os-scrollbar-unusable {
+  background: transparent;
+}
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track,
+.os-theme-light.os-scrollbar > .os-scrollbar-track {
+  background: transparent;
+}
+
+.os-theme-dark.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
+  min-width: 30px;
+}
+
+.os-theme-dark.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
+  min-height: 30px;
+}
+
+.os-theme-dark.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle {
+  transition: background-color 0.3s;
+}
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-dark.os-scrollbar > .os-scrollbar-track,
+.os-theme-light.os-scrollbar > .os-scrollbar-track {
+  border-radius: 10px;
+}
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.os-theme-dark.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.os-theme-light.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
+.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: block;
+}
+
+.os-theme-dark.os-host-scrollbar-hidden > .os-scrollbar-handle:before {
+  display: none;
+}
+
+.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before {
+  top: -6px;
+  bottom: -2px;
+}
+
+.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
+  left: -6px;
+  right: -2px;
+}
+
+.os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
+  right: -6px;
+  left: -2px;
+}
+/*# sourceMappingURL=overlayscrollbars.css.map */

packages/overlayscrollbars/styles/overlayscrollbars.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../stdin","../../src/styles/sizeobserver.scss","../overlayscrollbars.css","../../src/styles/trinsicobserver.scss","../../src/styles/structure.scss","../../src/styles/scrollbars.scss"],"names":[],"mappings":"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","file":"overlayscrollbars.css"}

packages/overlayscrollbars/types/overlayscrollbars.d.ts

@@ -0,0 +1,291 @@
+declare type CacheValues<T> = [value: T, changed: boolean, previous?: T];
+declare type UpdateCache<Value> = (force?: boolean) => CacheValues<Value>;
+
+interface WH<T = number> {
+    w: T;
+    h: T;
+}
+
+declare type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Record<string, unknown> ? DeepPartial<T[P]> : T[P];
+};
+declare type StyleObject<CustomCssProps = ''> = {
+    [Key in keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : '')]?: string | number;
+};
+declare type OverflowStyle = 'scroll' | 'hidden' | 'visible';
+
+interface TRBL {
+    t: number;
+    r: number;
+    b: number;
+    l: number;
+}
+
+interface XY<T = number> {
+    x: T;
+    y: T;
+}
+
+declare type EventListener$1<EventMap extends Record<string, any[]>, N extends keyof EventMap = keyof EventMap> = (...args: EventMap[N]) => void;
+declare type InitialEventListeners$1<EventMap extends Record<string, any[]>> = {
+    [K in keyof EventMap]?: EventListener$1<EventMap> | EventListener$1<EventMap>[];
+};
+
+declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible' | 'visible-hidden' | 'visible-scroll';
+declare type ScrollbarVisibilityBehavior = 'visible' | 'hidden' | 'auto';
+declare type ScrollbarAutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
+interface Options {
+    paddingAbsolute: boolean;
+    showNativeOverlaidScrollbars: boolean;
+    updating: {
+        elementEvents: Array<[elementSelector: string, eventNames: string]> | null;
+        attributes: string[] | null;
+        debounce: [timeout: number, maxWait: number] | number | null;
+        ignoreMutation: ((mutation: MutationRecord) => any) | null;
+    };
+    overflow: {
+        x: OverflowBehavior;
+        y: OverflowBehavior;
+    };
+    scrollbars: {
+        theme: string | null;
+        visibility: ScrollbarVisibilityBehavior;
+        autoHide: ScrollbarAutoHideBehavior;
+        autoHideDelay: number;
+        dragScroll: boolean;
+        clickScroll: boolean;
+        pointers: string[] | null;
+    };
+}
+
+declare type PluginInstance = Record<string, unknown> | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void);
+declare type Plugin<T extends PluginInstance = PluginInstance> = {
+    [pluginName: string]: T;
+};
+
+declare type SizeObserverPluginInstance = {
+    _: (listenerElement: HTMLElement, onSizeChangedCallback: (appear: boolean) => any, observeAppearChange: boolean) => [appearCallback: () => any, offFns: (() => any)[]];
+};
+declare const sizeObserverPlugin: Plugin<SizeObserverPluginInstance>;
+
+declare type StaticInitialization = HTMLElement | false | null;
+declare type DynamicInitialization = HTMLElement | boolean | null;
+declare type Initialization = StructureInitialization & ScrollbarsInitialization & {
+    cancel: {
+        nativeScrollbarsOverlaid: boolean;
+        body: boolean | null;
+    };
+};
+declare type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
+declare type InitializationTargetObject = DeepPartial<Initialization> & {
+    target: InitializationTargetElement;
+};
+declare type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
+/**
+ * Static elements MUST be present.
+ * With false, null or undefined the element will be generated, otherwise the specified element is taken.
+ */
+declare type StaticInitializationElement<Args extends any[]> = ((...args: Args) => StaticInitialization) | StaticInitialization;
+/**
+ * Dynamic element CAN be present.
+ * If its a element the element will be taken as the repsective element.
+ * With true the element will be generated.
+ * With false, null or undefined the element won't be generated.
+ */
+declare type DynamicInitializationElement<Args extends any[]> = ((...args: Args) => DynamicInitialization) | DynamicInitialization;
+
+declare type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[
+    target: InitializationTargetElement,
+    host: HTMLElement,
+    viewport: HTMLElement
+]>;
+/**
+ * Object for special initialization.
+ *
+ * If element is provided, the provided element takes all its responsibilities.
+ * DOM hierarchy isn't checked in this case, its assumed that hieararchy is correct in such a case.
+ *
+ * Null or Undefined means that the environment initialization strategy is used.
+ */
+interface ScrollbarsInitialization {
+    scrollbarsSlot: ScrollbarsDynamicInitializationElement;
+}
+
+interface StructureSetupState {
+    _padding: TRBL;
+    _paddingAbsolute: boolean;
+    _viewportPaddingStyle: StyleObject;
+    _overflowEdge: XY<number>;
+    _overflowAmount: XY<number>;
+    _overflowStyle: XY<OverflowStyle>;
+    _hasOverflow: XY<boolean>;
+    _heightIntrinsic: boolean;
+    _directionIsRTL: boolean;
+}
+
+declare type StructureStaticInitializationElement = StaticInitializationElement<[
+    target: InitializationTargetElement
+]>;
+declare type StructureDynamicInitializationElement = DynamicInitializationElement<[
+    target: InitializationTargetElement
+]>;
+/**
+ * Object for special initialization.
+ *
+ * Target is always required, if element is not provided or undefined it will be generated.
+ *
+ * If element is provided, the provided element takes all its responsibilities.
+ * DOM hierarchy isn't checked in this case, its assumed that hieararchy is correct in such a case.
+ *
+ * undefined means that the default initialization strategy is used.
+ */
+interface StructureInitialization {
+    host: StructureStaticInitializationElement;
+    viewport: StructureStaticInitializationElement;
+    padding: StructureDynamicInitializationElement;
+    content: StructureDynamicInitializationElement;
+}
+
+interface ViewportOverflowState {
+    _scrollbarsHideOffset: XY<number>;
+    _scrollbarsHideOffsetArrange: XY<boolean>;
+    _overflowScroll: XY<boolean>;
+    _overflowStyle: XY<OverflowStyle>;
+}
+declare type GetViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject) => ViewportOverflowState;
+declare type HideNativeScrollbars = (viewportOverflowState: ViewportOverflowState, directionIsRTL: boolean, viewportArrange: boolean, viewportStyleObj: StyleObject) => void;
+
+declare type EnvironmentEventMap = {
+    _: [];
+};
+interface InternalEnvironment {
+    readonly _nativeScrollbarsSize: XY;
+    readonly _nativeScrollbarsOverlaid: XY<boolean>;
+    readonly _nativeScrollbarsHiding: boolean;
+    readonly _rtlScrollBehavior: {
+        n: boolean;
+        i: boolean;
+    };
+    readonly _flexboxGlue: boolean;
+    readonly _cssCustomProperties: boolean;
+    readonly _staticDefaultInitialization: Initialization;
+    readonly _staticDefaultOptions: Options;
+    _addListener(listener: EventListener$1<EnvironmentEventMap, '_'>): () => void;
+    _getDefaultInitialization(): Initialization;
+    _setDefaultInitialization(newInitialization: DeepPartial<Initialization>): void;
+    _getDefaultOptions(): Options;
+    _setDefaultOptions(newDefaultOptions: DeepPartial<Options>): void;
+}
+
+declare type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH<number>, sizeFraction: WH<number>, directionIsRTL: boolean) => boolean;
+declare type UndoViewportArrangeResult = [
+    redoViewportArrange: () => void,
+    overflowState?: ViewportOverflowState
+];
+declare type UndoArrangeViewport = (showNativeOverlaidScrollbars: boolean, directionIsRTL: boolean, viewportOverflowState?: ViewportOverflowState) => UndoViewportArrangeResult;
+declare type ScrollbarsHidingPluginInstance = {
+    _createUniqueViewportArrangeElement(env: InternalEnvironment): HTMLStyleElement | false;
+    _overflowUpdateSegment(doViewportArrange: boolean, flexboxGlue: boolean, viewport: HTMLElement, viewportArrange: HTMLStyleElement | false | null | undefined, getState: () => StructureSetupState, getViewportOverflowState: GetViewportOverflowState, hideNativeScrollbars: HideNativeScrollbars): [ArrangeViewport, UndoArrangeViewport];
+    _envWindowZoom(): (envInstance: InternalEnvironment, updateNativeScrollbarSizeCache: UpdateCache<XY<number>>, triggerEvent: () => void) => void;
+};
+declare const scrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance>;
+
+interface OnUpdatedEventListenerArgs {
+    updateHints: {
+        sizeChanged: boolean;
+        directionChanged: boolean;
+        heightIntrinsicChanged: boolean;
+        overflowEdgeChanged: boolean;
+        overflowAmountChanged: boolean;
+        overflowStyleChanged: boolean;
+        hostMutation: boolean;
+        contentMutation: boolean;
+    };
+    changedOptions: DeepPartial<Options>;
+    force: boolean;
+}
+declare type EventListenerMap = {
+    /**
+     * Triggered after all elements are initialized and appended.
+     */
+    initialized: [instance: OverlayScrollbars];
+    /**
+     * Triggered after an update.
+     */
+    updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
+    /**
+     * Triggered after all elements, observers and events are destroyed.
+     */
+    destroyed: [instance: OverlayScrollbars, canceled: boolean];
+};
+declare type InitialEventListeners = InitialEventListeners$1<EventListenerMap>;
+declare type EventListener<N extends keyof EventListenerMap> = EventListener$1<EventListenerMap, N>;
+
+interface OverlayScrollbarsStatic {
+    (target: InitializationTarget): OverlayScrollbars | undefined;
+    (target: InitializationTarget, options: DeepPartial<Options>, eventListeners?: InitialEventListeners): OverlayScrollbars;
+    plugin(plugin: Plugin | Plugin[]): void;
+    valid(osInstance: any): boolean;
+    env(): Environment;
+}
+interface Environment {
+    scrollbarsSize: XY<number>;
+    scrollbarsOverlaid: XY<boolean>;
+    scrollbarsHiding: boolean;
+    rtlScrollBehavior: {
+        n: boolean;
+        i: boolean;
+    };
+    flexboxGlue: boolean;
+    cssCustomProperties: boolean;
+    staticDefaultInitialization: Initialization;
+    staticDefaultOptions: Options;
+    getDefaultInitialization(): Initialization;
+    setDefaultInitialization(newDefaultInitialization: DeepPartial<Initialization>): void;
+    getDefaultOptions(): Options;
+    setDefaultOptions(newDefaultOptions: DeepPartial<Options>): void;
+}
+interface State {
+    padding: TRBL;
+    paddingAbsolute: boolean;
+    overflowEdge: XY<number>;
+    overflowAmount: XY<number>;
+    overflowStyle: XY<OverflowStyle>;
+    hasOverflow: XY<boolean>;
+    directionRTL: boolean;
+    destroyed: boolean;
+}
+interface ScrollbarElements {
+    scrollbar: HTMLElement;
+    track: HTMLElement;
+    handle: HTMLElement;
+}
+interface CloneableScrollbarElements extends ScrollbarElements {
+    clone(): ScrollbarElements;
+}
+interface Elements {
+    target: HTMLElement;
+    host: HTMLElement;
+    padding: HTMLElement;
+    viewport: HTMLElement;
+    content: HTMLElement;
+    scrollOffsetElement: HTMLElement;
+    scrollEventElement: HTMLElement | Document;
+    scrollbarHorizontal: CloneableScrollbarElements;
+    scrollbarVertical: CloneableScrollbarElements;
+}
+interface OverlayScrollbars {
+    options(): Options;
+    options(newOptions?: DeepPartial<Options>): Options;
+    update(force?: boolean): OverlayScrollbars;
+    destroy(): void;
+    state(): State;
+    elements(): Elements;
+    on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): () => void;
+    on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): () => void;
+    off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): void;
+    off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): void;
+}
+declare const OverlayScrollbars: OverlayScrollbarsStatic;
+
+export { DynamicInitializationElement, EventListener, EventListenerMap, InitialEventListeners, Initialization, InitializationTarget, InitializationTargetElement, InitializationTargetObject, OnUpdatedEventListenerArgs, Options, OverflowBehavior, OverlayScrollbars, Plugin, PluginInstance, ScrollbarAutoHideBehavior, ScrollbarVisibilityBehavior, StaticInitializationElement, scrollbarsHidingPlugin, sizeObserverPlugin };