chore: new development cert

.config/certificate/tls.crt

------BEGIN CERTIFICATE-----
-MIIDpTCCAo2gAwIBAgIUIhictOU1c7uiyV3gQqDnKiX+4XYwDQYJKoZIhvcNAQEL
-BQAwNzELMAkGA1UEBhMCQVUxEzARBgNVBAgMClNvbWUtU3RhdGUxEzARBgNVBAoM
-CkFsdmluZS1ERVYwHhcNMjMwNDEzMTE1NzM2WhcNNDMwNDA4MTE1NzM2WjA3MQsw
-CQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTETMBEGA1UECgwKQWx2aW5l
-LURFVjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBANqUdoCV+SXzTcke
-fxZUuCdiPVSB9ygqVWSkoENDGMkuR5dxIIvAdAUfT71VHLMbq6Vm4O+9PHRVqs96
-gxD6Zz4qtZUvRXagBS7FGYisko3Akj4BfdpbHXw5N/VAOmzSOiQTFH5qtEijTie5
-ycGS+DMxLCuiNdPUTIKGDBo38iPCEAvt/InwMA6mTokzeTp2rKbo1GRXTxelXoDC
-UjQbBH3juqYJeye4R2yn3h88xEGWbiy55K+vbTQdOTrYi8pb5t91BW82whCZGT+F
-WS1CmL5Ie8ArbvRxxWN6CmVXzkCLCaR2f9/3CRD23YkSNFVowLtbvnxSbbebPRBG
-ZINABMcCAwEAAaOBqDCBpTAJBgNVHRMEAjAAMHIGA1UdIwRrMGmAFN2+5FhTq1n4
-iBFmUynHxYXTHbJGoTukOTA3MQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1T
-dGF0ZTETMBEGA1UECgwKQWx2aW5lLURFVoIUSLmMatoX5y+KA87qlSxyxLkRluYw
-CwYDVR0PBAQDAgTwMBcGA1UdEQQQMA6CDCouYWx2aW5lLmRldjANBgkqhkiG9w0B
-AQsFAAOCAQEAfwywLYjHymyh1D5y2dcPUki+xBTKKhxSZ/wA+6TySToqlVlN9uVF
-RA/S35Rt7kUKmajgkpUlbVXYTNg8JsrqJqmzyPyVhkNNeTLkG1dYGLxKfToQ9RWI
-keUIzqyzylJVORN1kN900I3QMBSn4IJgCjKzBLxdT+M4mELy3x8dFulFo0AsgStW
-A4h7IcTrmzdDLXnE3+BuOBwDZLqsKqPX7hBjhMi4+Z87JU0cNWOifuAmQXwHy4Ud
-/qLkLrm50S4eph0zJJw+R18tmfTnuF9b1NdLQ3InrzO2rVh3Q65fVLIsCEjxh8PL
-ckBVfAPucfI4jDzm91REW4a60+aeLCDvBQ==
------END CERTIFICATE-----

.config/certificate/tls.key

------BEGIN RSA PRIVATE KEY-----
-MIIEpAIBAAKCAQEA2pR2gJX5JfNNyR5/FlS4J2I9VIH3KCpVZKSgQ0MYyS5Hl3Eg
-i8B0BR9PvVUcsxurpWbg7708dFWqz3qDEPpnPiq1lS9FdqAFLsUZiKySjcCSPgF9
-2lsdfDk39UA6bNI6JBMUfmq0SKNOJ7nJwZL4MzEsK6I109RMgoYMGjfyI8IQC+38
-ifAwDqZOiTN5OnaspujUZFdPF6VegMJSNBsEfeO6pgl7J7hHbKfeHzzEQZZuLLnk
-r69tNB05OtiLylvm33UFbzbCEJkZP4VZLUKYvkh7wCtu9HHFY3oKZVfOQIsJpHZ/
-3/cJEPbdiRI0VWjAu1u+fFJtt5s9EEZkg0AExwIDAQABAoIBADJvY1CUSmL5Ww93
-G/f5IGzl/CTNwEviSMXqPpiGmOeC6D4Hem0EwUCVUv7q7q5dSiPmMyzeS17EjZ9G
-M4vtW3k6vZ9owux2S/vYuuWQfFh9AMGR8oo5z/nj8geDBHgrogLE7EunL2Y7WENO
-WUFzOhYF2J1Q1n7EU8siRxSdqB+bsIUN6qC5FRHPpjzA1oscwpfbG2MnRc/GrW0H
-1UxRyCuPl8y5NAqm5IPx7DTr+Vo0/VvT4c3grdDJIck+rJgR2KEebEdyLvAXQn9+
-oVzO7KyCt+JUGxW3csbVI22wxQtMbPCyyJ5STBTH39sAO2RlCdq0s5FqTRedj2Dx
-zAhfWzECgYEA89QFkU8fUpO+6lwW8NllJa9oxoFsEXPbeBM7srPn9AIDnhXBQ9u0
-eYfR6hxAqGb3g0z/VFCfS83p77683B7iPj8VvXO+2kAj93XP2H8Q4RQR/AfBpDMU
-z8JSo1MOGFMiQ/WiTMdYs/9X/q0WS1La9fd52gB8z61edAnntdy/2YMCgYEA5X3I
-h7GG2uz1iwnQMegjv25ywsj4+ISY4yYHyRwQLrJBXMlq1vk3YlAfy3gqA/snCKe0
-6nivb/Vv82lX0hc81oWBSOYP9IGiBIWZ/tg9rZW0i57icBYzvvpe/jMGdNE/mM1W
-7808NINZp3Pv4kulWlxv2rJhvzA3C+LD5qYJeG0CgYBvX0YXxGtLPb8zr1KvOq2P
-1BpoqY8iPahepXJcQv7NHupmGAvKIh3CcT55z+PcyAOAjvgFnDnW1zxmzNnZNaYj
-xo74lVj0ud1z1/VTL18XYCKC20wg41A7QcibX4GNrNN29UjoBxpGRXj9FDSdvT/U
-n/Chmh1ogwkkua2EDUv4XwKBgQCKMPwX+ebi3d3eI8Kiys77715bvPlvbSlDXxtB
-Fw0HkX+aiA819ExNf0ImG+3xB8Oxiot+xb2fBYSsZrrjX+raovn/E8p3ybfuUSUy
-OLSrWoKlsL9aD4SJc+rP15oDrh1FviCjtkqStKXAGChTdInVp+QTJWeG4VnEZoDg
-2wrI4QKBgQDnhaZKmg4ShL2xx/kT8Nml6u3gC3S0WLyZTkHCsvOohoxev5EocPLU
-NCZTCaCKrCddnvk7Sn5746mAMK+ySS+PIwa/0HB5UKfq4Wei1oEQINKUJT9jbgD1
-3WWz9hiu+mu0y0AbCermlgpt1nIhR6lRrCRILrOPHaahQARFfrQryg==
------END RSA PRIVATE KEY-----

.gitignore

@@ -490,3 +490,5 @@ result
 # pupeeter screenshot of the test page
 screenshot.png
 /copy-to-documentation/
+
+/development/config/vite.config.mjs

development/config/vite.config.mjs

-import {resolve} from 'path';
-import {defineConfig} from 'vite'
-
-import {projectRoot} from './import.mjs';
-
-import cssnano from 'cssnano';
-import normalizeCss from 'postcss-normalize';
-import postcssFluid from 'postcss-fluid';
-import importCss from 'postcss-import';
-import postcssNesting from 'postcss-nesting';
-import postcssFor from 'postcss-for';
-import autoprefixer from 'autoprefixer';
-import postcssMixins from 'postcss-mixins';
-import postcssResponsiveType from 'postcss-responsive-type';
-import {ViteMinifyPlugin} from 'vite-plugin-minify'
-import {viteMockServe} from 'vite-plugin-mock';
-
-import {buildCSS, createScriptFilenameFromStyleFilename} from '../scripts/buildStylePostCSS.mjs';
-import directoryIndex from 'vite-plugin-directory-index';
-
-export default defineConfig({
-    clearScreen: false,
-
-    base: './',
-
-    appType: 'mpa',
-    root: projectRoot,
-    mode: 'development',
-    logLevel: 'info',
-    esbuild: {
-        minifyIdentifiers: true,
-        minifySyntax: true,
-        minifyWhitespace: true,
-        target: 'es2015',
-        legalComments: 'none'
-    },
-    plugins: [
-        // banner(
-        //     `/**\n * name: \n * version: v\n * description: \n * author: schukai GmbH\n * homepage: https://monsterjs.org\n */`
-        // ),
-
-        ViteMinifyPlugin(),
-        directoryIndex({}),
-
-        viteMockServe({
-            mockPath: projectRoot + '/development/mock',
-        }),
-
-        {
-            name: 'run-script-on-pcss-change',
-            handleHotUpdate({file, server}) {
-
-                if (file.endsWith('.pcss')) {
-
-                    const source = file;
-                    const dest = createScriptFilenameFromStyleFilename(file);
-
-                    buildCSS(source, dest).then(() => {
-                    }).catch((e) => {
-                        console.error(e.message);
-                    })
-
-                }
-            },
-        }
-
-
-    ],
-
-    css: {
-        postcss: {
-            plugins: [
-                importCss(),
-                normalizeCss,
-                postcssMixins,
-                postcssNesting(),
-                postcssFor,
-                postcssFluid({
-                    min: '320px',
-                    max: '1800px',
-                    functionName: 'fluid',
-                }),
-                autoprefixer,
-                cssnano,
-                postcssResponsiveType,
-            ]
-        }
-    },
-
-    server: {
-        open: '/development/',
-        port: 8443,
-        host: "localhost.alvine.dev",
-        https: {
-            key: projectRoot + '/development/certificates/key.pem',
-            cert: projectRoot + '/development/certificates/cert.pem',
-
-        },
-        debug: true,
-        proxy: {
-            '^/api/commerce/orders/search': {
-                target: 'http://localhost:8090',
-                changeOrigin: false,
-
-                configure: (proxy, options) => {
-                    proxy.secure = false
-                    proxy.agent = null
-
-                },
-            },
-            '^/assets/world.json$': {
-                target: 'https://monsterjs.org/',
-                changeOrigin: true,
-
-                configure: (proxy, options) => {
-
-                    proxy.secure = true
-                    proxy.agent = null
-
-                },
-            },
-        },
-    },
-
-
-})
\ No newline at end of file

development/templates/vite.config.mjs

@@ -92,8 +92,9 @@ export default defineConfig({
         port: 8443,
         host: "localhost.alvine.dev",
         https: {
-            key: projectRoot + '/development/certificates/key.pem',
-            cert: projectRoot + '/development/certificates/cert.pem',
+            key: "${LOCALHOST_CERTS_DIR}/localhost.alvine.dev.key",
+            cert: "${LOCALHOST_CERTS_DIR}/localhost.alvine.dev.crt"
+            
 
         },
         debug: true,

flake.lock

 {
   "nodes": {
+    "certificatesFlake": {
+      "inputs": {
+        "commonFlake": "commonFlake",
+        "flake-utils": "flake-utils",
+        "flakeUtils": "flakeUtils",
+        "nixpkgs": "nixpkgs_2",
+        "nixpkgsUnstable": "nixpkgsUnstable",
+        "versionFlake": "versionFlake"
+      },
+      "locked": {
+        "lastModified": 1726843786,
+        "narHash": "sha256-10dh/8mLSK3/NfT1Q8GA+nqhHWv36MQd1BMblyIUaHM=",
+        "ref": "refs/heads/master",
+        "rev": "895ecf979969fb390e2c2c8bd2939d8d3e00fa7f",
+        "revCount": 4,
+        "type": "git",
+        "url": "https://gitlab.schukai.com/alvine/certificates.git"
+      },
+      "original": {
+        "type": "git",
+        "url": "https://gitlab.schukai.com/alvine/certificates.git"
+      }
+    },
     "commonFlake": {
       "inputs": {
         "nixpkgs": "nixpkgs"
@@ -20,16 +43,71 @@
         "url": "https://gitlab.schukai.com/schukai/entwicklung/nix-flakes.git?dir=common"
       }
     },
+    "commonFlake_2": {
+      "inputs": {
+        "nixpkgs": "nixpkgs_4"
+      },
+      "locked": {
+        "dir": "common",
+        "lastModified": 1718788884,
+        "narHash": "sha256-PefMbkGNMK9TN1qcNL9OkFVTNdv6wo6XoaS8eTdsY04=",
+        "ref": "refs/heads/master",
+        "rev": "abda2dc723e13dfc835535593321c514666e679e",
+        "revCount": 39,
+        "type": "git",
+        "url": "https://gitlab.schukai.com/schukai/entwicklung/nix-flakes.git?dir=common"
+      },
+      "original": {
+        "dir": "common",
+        "type": "git",
+        "url": "https://gitlab.schukai.com/schukai/entwicklung/nix-flakes.git?dir=common"
+      }
+    },
     "flake-utils": {
       "inputs": {
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1710146030,
-        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+        "lastModified": 1726560853,
+        "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
+        "type": "github"
+      },
+      "original": {
+        "id": "flake-utils",
+        "type": "indirect"
+      }
+    },
+    "flake-utils_2": {
+      "inputs": {
+        "systems": "systems_3"
+      },
+      "locked": {
+        "lastModified": 1726560853,
+        "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flakeUtils": {
+      "inputs": {
+        "systems": "systems_2"
+      },
+      "locked": {
+        "lastModified": 1726560853,
+        "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
+        "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
         "type": "github"
       },
       "original": {
@@ -53,13 +131,29 @@
         "type": "indirect"
       }
     },
+    "nixpkgsUnstable": {
+      "locked": {
+        "lastModified": 1726463316,
+        "narHash": "sha256-gI9kkaH0ZjakJOKrdjaI/VbaMEo9qBbSUl93DnU7f4c=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "99dc8785f6a0adac95f5e2ab05cc2e1bf666d172",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1726320982,
-        "narHash": "sha256-RuVXUwcYwaUeks6h3OLrEmg14z9aFXdWppTWPMTwdQw=",
+        "lastModified": 1726447378,
+        "narHash": "sha256-2yV8nmYE1p9lfmLHhOCbYwQC/W8WYfGQABoGzJOb1JQ=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "8f7492cce28977fbf8bd12c72af08b1f6c7c3e49",
+        "rev": "086b448a5d54fd117f4dc2dee55c9f0ff461bdc1",
         "type": "github"
       },
       "original": {
@@ -84,12 +178,59 @@
         "type": "indirect"
       }
     },
+    "nixpkgs_4": {
+      "locked": {
+        "lastModified": 1714971268,
+        "narHash": "sha256-IKwMSwHj9+ec660l+I4tki/1NRoeGpyA2GdtdYpAgEw=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "27c13997bf450a01219899f5a83bd6ffbfc70d3c",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "ref": "nixos-23.11",
+        "type": "indirect"
+      }
+    },
+    "nixpkgs_5": {
+      "locked": {
+        "lastModified": 1726447378,
+        "narHash": "sha256-2yV8nmYE1p9lfmLHhOCbYwQC/W8WYfGQABoGzJOb1JQ=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "086b448a5d54fd117f4dc2dee55c9f0ff461bdc1",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-24.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_6": {
+      "locked": {
+        "lastModified": 1704145853,
+        "narHash": "sha256-G/1AMt9ibpeMlcxvD1vNaC8imGaK+g7zZ99e29BLgWw=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "2d2ea8eab9e400618748ab1a6a108255233b602c",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "ref": "nixos-23.11",
+        "type": "indirect"
+      }
+    },
     "root": {
       "inputs": {
-        "commonFlake": "commonFlake",
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs_2",
-        "versionFlake": "versionFlake"
+        "certificatesFlake": "certificatesFlake",
+        "commonFlake": "commonFlake_2",
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": "nixpkgs_5",
+        "versionFlake": "versionFlake_2"
       }
     },
     "systems": {
@@ -107,6 +248,36 @@
         "type": "github"
       }
     },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_3": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
     "versionFlake": {
       "inputs": {
         "nixpkgs": "nixpkgs_3"
@@ -124,6 +295,24 @@
         "type": "git",
         "url": "https://gitlab.schukai.com/oss/utilities/version.git"
       }
+    },
+    "versionFlake_2": {
+      "inputs": {
+        "nixpkgs": "nixpkgs_6"
+      },
+      "locked": {
+        "lastModified": 1716914109,
+        "narHash": "sha256-JY0PLGWzYRDQ9daKLGOBWHHuYun9nSpH9J3aSk8iDmQ=",
+        "ref": "refs/heads/master",
+        "rev": "fe8dd932d6c414a93b4a69c470792b2db038e0fb",
+        "revCount": 129,
+        "type": "git",
+        "url": "https://gitlab.schukai.com/oss/utilities/version.git"
+      },
+      "original": {
+        "type": "git",
+        "url": "https://gitlab.schukai.com/oss/utilities/version.git"
+      }
     }
   },
   "root": "root",

flake.nix

@@ -14,6 +14,12 @@
       url = "git+https://gitlab.schukai.com/oss/utilities/version.git";
       flake = true;
     };
+        
+    certificatesFlake = {
+      url = "git+https://gitlab.schukai.com/alvine/certificates.git";
+      flake = true;
+    };    
+    
   };
 
   outputs = {
@@ -22,6 +28,7 @@
     flake-utils,
     versionFlake,
     commonFlake,
+    certificatesFlake,
   } @ inputs:
     flake-utils.lib.eachDefaultSystem (system: let
       inherit (nixpkgs.lib) optional;
@@ -36,6 +43,10 @@
             common = commonPck;
           })
           
+          (final: prev: {
+            alvineDevCerts = certificatesFlake;
+          })          
+
           (final: prev: {
             version = versionPck;
           })

nix/scripts/start-server.nix

@@ -25,6 +25,7 @@ in
 
     export PNPX_BIN=${pkgs'.nodePackages.pnpm}/bin/pnpx
     export NODE_BIN=${pkgs'.nodejs_20}/bin/node
+    export LOCALHOST_CERTS_DIR=${pkgs'.alvineDevCerts}
 
     cd development
 

nix/scripts/update-project.nix

@@ -26,6 +26,14 @@ in
       exit 1
     fi
 
+    ## update monser.mjs
+    echo_step "Updating monser.mjs"
+    if ! ${pkgs'.nodejs_22}/bin/node "./development/scripts/buildMonsterFile.mjs"
+    then
+        echo_fail "Failed to update monser.mjs"
+        exit 1
+    fi
+
     ##format javascript code
     echo_step "Formatting JS code"
     if ! ${pkgs'.biome}/bin/biome format --write ./source/

source/components/datatable/datasource/rest.mjs

@@ -215,7 +215,6 @@ class Rest extends Datasource {
 	 * @returns {Promise<never>|*}
 	 */
 	fetch() {
-		
 		const opt = clone(this.getOption("read"));
 		this[dataSourceSymbol].setOption("read", opt);
 

source/components/layout/slider.mjs

@@ -11,19 +11,12 @@
  */
 
 import {instanceSymbol} from "../../constants.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {
-    ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_PREFIX,
-    ATTRIBUTE_ROLE,
-} from "../../dom/constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
+import {ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
 import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
 import {
     assembleMethodSymbol,
     registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {isFunction} from "../../types/is.mjs";
 import {SliderStyleSheet} from "./stylesheet/slider.mjs";
 import {fireCustomEvent} from "../../dom/events.mjs";
 
@@ -65,7 +58,7 @@ const configSymbol = Symbol("config");
  * @private
  * @type {string}
  */
-const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from"
+const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from";
 
 /**
  * A Slider
@@ -100,14 +93,8 @@ class Slider extends CustomElement {
             isDragging: false,
             draggingPos: 0,
             startPos: 0,
-            //  currentTranslate: 0,
-            //  prevTranslate: 0,
-            //
-            // startPositions: null,
-            // currentPositions: null,
-
             autoPlayInterval: null,
-        }
+        };
 
         initControlReferences.call(this);
         initEventHandler.call(this);
@@ -124,10 +111,18 @@ class Slider extends CustomElement {
      *
      * @property {Object} templates Template definitions
      * @property {string} templates.main Main template
-     * @property {Object} labels Label definitions
-     * @property {Object} actions Callbacks
      * @property {string} actions.click="throw Error" Callback when clicked
      * @property {Object} features Features
+     * @property {boolean} features.carousel=true Carousel feature
+     * @property {boolean} features.autoPlay=true Auto play feature
+     * @property {boolean} features.thumbnails=true Thumbnails feature
+     * @property {boolean} features.drag=true Drag feature
+     * @property {Object} autoPlay Auto play configuration
+     * @property {number} autoPlay.delay=1500 Delay between slides
+     * @property {number} autoPlay.startDelay=1000 Start delay
+     * @property {string} autoPlay.direction="next" Direction of the auto play
+     * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
+     * @property {boolean} autoPlay.touchPause=true Pause on touch
      * @property {Object} classes CSS classes
      * @property {boolean} disabled=false Disabled state
      */
@@ -136,14 +131,15 @@ class Slider extends CustomElement {
             templates: {
                 main: getTemplate(),
             },
-            labels: {},
+
             classes: {},
             disabled: false,
 
             features: {
-                carousel: false,
+                carousel: true,
                 autoPlay: true,
                 thumbnails: true,
+                drag: true,
             },
 
             autoPlay: {
@@ -152,14 +148,8 @@ class Slider extends CustomElement {
                 direction: "next",
                 mouseOverPause: true,
                 touchPause: true,
-                drag: true,
             },
 
-            actions: {
-                click: () => {
-                    throw new Error("the click action is not defined");
-                },
-            }
         });
     }
 
@@ -184,7 +174,7 @@ class Slider extends CustomElement {
      * @returns {void}
      */
     moveTo(index) {
-        return moveTo.call(this, index)
+        return moveTo.call(this, index);
     }
 
     /**
@@ -224,7 +214,6 @@ class Slider extends CustomElement {
     startAutoPlay() {
         initAutoPlay.call(this);
     }
-
 }
 
 /**
@@ -262,7 +251,9 @@ function initStructure() {
  */
 function initThumbnails() {
     const self = this;
-    const thumbnails = this.shadowRoot.querySelector("[data-monster-role='thumbnails']");
+    const thumbnails = this.shadowRoot.querySelector(
+        "[data-monster-role='thumbnails']",
+    );
     const slides = Array.from(getSlottedElements.call(this, ":scope", null));
 
     slides.forEach((slide, index) => {
@@ -277,7 +268,7 @@ function initThumbnails() {
         });
 
         thumbnails.appendChild(thumbnail);
-    })
+    });
 
     this.addEventListener("monster-slider-moved", (e) => {
         const index = e.detail.index;
@@ -289,10 +280,10 @@ function initThumbnails() {
 
         Array.from(thumbnails.children).forEach((thumb) => {
             thumb.classList.remove("current");
-        })
+        });
 
         thumbnail.classList.add("current");
-    })
+    });
 }
 
 /**
@@ -306,7 +297,6 @@ function initAutoPlay() {
     const direction = autoPlay.direction;
 
     function start() {
-
         if (self[configSymbol].autoPlayInterval) {
             clearInterval(self[configSymbol].autoPlayInterval);
         }
@@ -354,17 +344,14 @@ function initAutoPlay() {
             start();
         });
     }
-
 }
 
 /**
  * @private
  */
 function initCarousel() {
-
     const {slides, totalSlides} = getSlidesAndTotal.call(this);
     if (this.getOption("features.carousel") && totalSlides > 2) {
-
         const firstElement = slides[0].cloneNode(true);
         firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
 
@@ -375,7 +362,6 @@ function initCarousel() {
         slides[0].insertAdjacentElement("beforebegin", lastElement);
 
         moveTo.call(this, 1);
-
     }
 }
 
@@ -394,7 +380,6 @@ function getSlidesAndTotal() {
  * @returns {number}
  */
 function next() {
-
     const {slides, totalSlides} = getSlidesAndTotal.call(this);
     const nextIndex = this[configSymbol].currentIndex + 1;
 
@@ -418,7 +403,6 @@ function next() {
  * @returns {number}
  */
 function prev() {
-
     const prevIndex = this[configSymbol].currentIndex - 1;
 
     if (prevIndex < 0) {
@@ -435,21 +419,20 @@ function prev() {
  * @param index
  */
 function setMoveProperties(slides, index) {
-
-    this[configSymbol].currentIndex = index
+    this[configSymbol].currentIndex = index;
 
     slides.forEach((slide) => {
         slide.classList.remove("current");
-    })
+    });
 
     let offset = -(index * 100);
     if (offset !== 0) {
         offset += "%";
     }
 
-    this[sliderElementSymbol].style.transform = `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+    this[sliderElementSymbol].style.transform =
+        `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
     slides[index].classList.add("current");
-
 }
 
 /**
@@ -458,13 +441,12 @@ function setMoveProperties(slides, index) {
  * @fires monster-slider-moved
  */
 function moveTo(index) {
-
     const {slides, totalSlides} = getSlidesAndTotal.call(this);
 
     if (index < 0) {
-        index = totalSlides - 1
+        index = totalSlides - 1;
     } else if (index >= totalSlides) {
-        index = 0
+        index = 0;
     }
 
     const slider = this[sliderElementSymbol];
@@ -498,7 +480,7 @@ function moveTo(index) {
 
                                 fireCustomEvent(this, "monster-slider-moved", {
                                     index: slideIndex,
-                                })
+                                });
 
                                 eventFired = true;
                             });
@@ -512,11 +494,10 @@ function moveTo(index) {
     if (!eventFired) {
         fireCustomEvent(this, "monster-slider-moved", {
             index: slideIndex,
-        })
+        });
     }
 }
 
-
 /**
  * @private
  * @return {initEventHandler}
@@ -540,10 +521,17 @@ function initEventHandler() {
         });
     }
 
-    this[sliderElementSymbol].addEventListener('mousedown', (e) => startDragging.call(this, e, 'mouse'));
-    this[sliderElementSymbol].addEventListener('touchstart', (e) => startDragging.call(this, e, 'touch'));
-    // this[sliderElementSymbol].addEventListener('touchend', () => stopDragging.call(this, 'touch'));
-    // this[sliderElementSymbol].addEventListener('touchmove', (e) => dragging.call(this, e, 'touch'));
+    if (this.getOption("features.drag")) {
+
+        this[sliderElementSymbol].addEventListener("mousedown", (e) =>
+            startDragging.call(this, e, "mouse"),
+        );
+
+        this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+            startDragging.call(this, e, "touch"),
+        );
+    }
+
     return this;
 }
 
@@ -553,27 +541,25 @@ function initEventHandler() {
  * @param type
  */
 function startDragging(e, type) {
-
     this[configSymbol].isDragging = true;
     this[configSymbol].startPos = getPositionX(e, type);
-    this[sliderElementSymbol].classList.add('grabbing');
+    this[sliderElementSymbol].classList.add("grabbing");
     this[sliderElementSymbol].style.transitionProperty = "none";
 
     const callbackMousemove = (x) => {
         dragging.call(this, x, type);
-    }
+    };
 
     const callbackMouseUp = () => {
-        
-        const endEvent = type === 'mouse' ? 'mouseup' : 'touchend';
-        const moveEvent = type === 'mouse' ? 'mousemove' : 'touchmove';
+        const endEvent = type === "mouse" ? "mouseup" : "touchend";
+        const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
 
         document.body.removeEventListener(endEvent, callbackMouseUp);
         document.body.removeEventListener(moveEvent, callbackMousemove);
 
         this[configSymbol].isDragging = false;
         this[configSymbol].startPos = 0;
-        this[sliderElementSymbol].classList.remove('grabbing');
+        this[sliderElementSymbol].classList.remove("grabbing");
         this[sliderElementSymbol].style.transitionProperty = "";
 
         const lastPos = this[configSymbol].draggingPos;
@@ -590,12 +576,10 @@ function startDragging(e, type) {
         }
 
         this.moveTo(newIndex);
+    };
 
-    }
-
-    document.body.addEventListener('mouseup', callbackMouseUp);
-    document.body.addEventListener('mousemove', callbackMousemove);
-
+    document.body.addEventListener("mouseup", callbackMouseUp);
+    document.body.addEventListener("mousemove", callbackMousemove);
 }
 
 /**
@@ -605,7 +589,7 @@ function startDragging(e, type) {
  * @returns {*|number|number}
  */
 function getPositionX(e, type) {
-    return type === 'mouse' ? e.pageX : e.touches[0].clientX;
+    return type === "mouse" ? e.pageX : e.touches[0].clientX;
 }
 
 /**
@@ -615,7 +599,8 @@ function getPositionX(e, type) {
  */
 function dragging(e, type) {
     if (!this[configSymbol].isDragging) return;
-    this[configSymbol].draggingPos = getPositionX(e, type) - this[configSymbol].startPos;
+    this[configSymbol].draggingPos =
+        getPositionX(e, type) - this[configSymbol].startPos;
     const {slides, totalSlides} = getSlidesAndTotal.call(this);
     setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
 }
@@ -625,7 +610,6 @@ function dragging(e, type) {
  * @return {void}
  */
 function initControlReferences() {
-
     this[controlElementSymbol] = this.shadowRoot.querySelector(
         `[${ATTRIBUTE_ROLE}="control"]`,
     );
@@ -664,5 +648,4 @@ function getTemplate() {
         </div>`;
 }
 
-
 registerCustomElement(Slider);

source/components/layout/stylesheet/slider.mjs

@@ -13,7 +13,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {SliderStyleSheet}
+export { SliderStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {SliderStyleSheet}
 const SliderStyleSheet = new CSSStyleSheet();
 
 try {
-  SliderStyleSheet.insertRule(`
+	SliderStyleSheet.insertRule(
+		`
 @layer slider { 
 :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4);--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6);--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1);--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4);--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1);--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1);--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6);--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}:host{box-sizing:border-box}[data-monster-role=control]{overflow:hidden;position:relative}[data-monster-role=control],[data-monster-role=slider]{box-sizing:border-box;display:flex;height:100%;width:100%}[data-monster-role=slider]{scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;transition:all .3s ease-in-out}[data-monster-role=slider].grabbing{box-sizing:border-box;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}::slotted(div){box-sizing:border-box;display:flex;flex:0 0 100%;height:100%}.prev{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;height:-moz-max-content;height:max-content;justify-content:center;left:.5rem;position:absolute;top:28%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-sticky)}.prev:hover{transform:scale(1.2)}.next{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;height:-moz-max-content;height:max-content;justify-content:center;position:absolute;right:.5rem;top:28%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-sticky)}.next:hover{transform:scale(1.2)}[data-monster-role=thumbnails]{border-radius:.5rem;bottom:20px;display:grid;gap:.5rem;grid-auto-flow:column;left:50%;position:absolute;transform:translateX(-50%);z-index:var(--monster-z-index-sticky)}[data-monster-role=thumbnails] .thumbnail{background-color:var(--monster-bg-color-primary-1);border-radius:50%;box-sizing:border-box;color:var(--monster-color-primary-1);cursor:pointer;filter:chroma(0 0 0 0);height:1rem;margin:.5rem;width:1rem}[data-monster-role=thumbnails] .thumbnail.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

source/components/navigation/table-of-content.mjs

@@ -271,7 +271,6 @@ function calcAndSetNavigationTopScrollableParentContext() {
 	const thisTop = scrollTop;
 	let top = 0;
 	top += scrollTop;
-	console.log(thisTop, scrollTop);
 
 	const offset = this.getOption("offset");
 	if (offset > 0) {

source/components/tree-menu/dragable-tree-menu.mjs

@@ -527,14 +527,14 @@ function switchToConfig() {
 
 		element.prepend(dropzone);
 
-		console.log("over", element.outerHTML, event);
+		//console.log("over", element.outerHTML, event);
 
 		event.dataTransfer.dropEffect = "move";
 	};
 
 	this[dragenterEventHandlerSymbol] = (event) => {
 		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
-		console.log("enter", element.outerHTML, event);
+		//console.log("enter", element.outerHTML, event);
 
 		event.dataTransfer.dropEffect = "move";
 		event.preventDefault();
@@ -548,7 +548,7 @@ function switchToConfig() {
 			return;
 		}
 
-		console.log("leave", element.outerHTML, event);
+		//console.log("leave", element.outerHTML, event);
 
 		event.dataTransfer.dropEffect = "move";
 		event.preventDefault();
@@ -560,7 +560,7 @@ function switchToConfig() {
 
 	this[dropEventHandlerSymbol] = (event) => {
 		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
-		console.log("drop", element.outerHTML, event);
+		//console.log("drop", element.outerHTML, event);
 		event.preventDefault();
 	};
 

source/dom/updater.mjs

@@ -113,20 +113,16 @@ class Updater extends Base {
 					promises.push(
 						new Promise((resolve, reject) => {
 							getWindow().requestAnimationFrame(() => {
-
 								try {
-
 									removeElement.call(this, change);
 									insertElement.call(this, change);
 									updateContent.call(this, change);
 									updateAttributes.call(this, change);
 
 									resolve();
-
 								} catch (error) {
 									reject(error);
 								}
-
 							});
 						}),
 					);

source/monster.mjs

 /**
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
  * Node module: @schukai/monster
  *
  * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -8,10 +8,16 @@
  * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
  * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
  * For more information about purchasing a commercial license, please contact schukai GmbH.
- *
- * SPDX-License-Identifier: AGPL-3.0
  */
 
+// THIS FILE IS AUTOGENERATED. DO NOT EDIT THIS FILE DIRECTLY.
+
+/**
+ * Main namespace for Monster.
+ *
+ * @namespace Monster
+ * @author schukai GmbH
+ */
 export * from "./components/layout/collapse.mjs";
 export * from "./components/layout/tabs.mjs";
 export * from "./components/layout/split-panel.mjs";
@@ -19,6 +25,7 @@ export * from "./components/layout/popper.mjs";
 export * from "./components/layout/width-toggle.mjs";
 export * from "./components/layout/panel.mjs";
 export * from "./components/layout/details.mjs";
+export * from "./components/layout/slider.mjs";
 export * from "./components/form/message-state-button.mjs";
 export * from "./components/form/button-bar.mjs";
 export * from "./components/form/reload.mjs";