@newlogic-digital/ui 3.3.0 → 3.5.0

package/README.md

@@ -18,14 +18,14 @@ Lightweight, modern and modular CSS framework with the best principles
 - ✨️ Progressive
 - ⚡️ Fast
 
-Newlogic UI is component framework with easy syntax. Modern approach of CSS properties, enriched with utility classes from Tailwind. Inspired by favourite frameworks like Boostrap and Bulma
+Newlogic UI is component framework with easy syntax for backend integration. Modern approach of CSS properties, enriched with utility classes from TailwindCSS and powered by Winduum.
 
-Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP
+Javascript implementation is only **28 kB** and mainly intended for use on backend rendered websites and applications with PHP framework Nette
 
 ## ⚙️ Under the hood
-* **[Vituum](https://vituum.dev/)** - a small wrapper around Vite, adds support of template engines and more
-* **[Newlogic Core](https://github.com/newlogic-digital/core)** - integration for Vituum, adds pre-defined config of integrations and more
-* **[ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)** - completely written in modern JS syntax - ES8+, ES module, etc.
+* **[Vituum](https://vituum.dev/)** - plugins for Vite, adds support for template engines and more.
+* **[Newlogic Core](https://github.com/newlogic-digital/core)** - starter pack for creating modern web applications. Powered by Vite and Vituum.
+* **[ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)** - completely written in modern JS syntax - esnext, ES modules, etc.
 * **[PostCSS](https://postcss.org/)** - completely written in modern CSS syntax - nesting, variables, etc.
 * **[Tailwind CSS](https://tailwindcss.com/)** - rich utility classes for everything
 * **[Stimulus](https://stimulus.hotwire.dev/)** - a modest JavaScript framework for the HTML you already have
@@ -33,11 +33,11 @@ Javascript implementation is mainly intended for use on backend rendered website
 * **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.
 
 
-The core of the Newlogic UI is Vituum with Newlogic Core, which compiles modern JS and CSS syntax and contains other tools for web development. Source code can be used with any other tools or even different environment than NodeJS, eg. Deno and is written in W3C standards and should be runnable in current or future version of browsers. The framework is modular, and you can really use only what is needed for your project.
+Newlogic UI uses Newlogic Core, which compiles modern JS and CSS syntax via Vite and Vituum. Source code can be used with any other tools or even different environment than NodeJS, e.g. Deno and is written in W3C standards and should be runnable in current or future version of browsers.
 
 ## 🪄 Get started
 
-Creating a new project (using Vituum)
+Creating a new project (with Vituum and Newlogic Core)
 ```sh
 $ git clone --depth 1 https://github.com/newlogic-digital/ui.git newlogic-ui-project
 $ cd newlogic-ui-project && npm i
@@ -57,22 +57,18 @@ $ npm i @newlogic-digital/ui
 
 ```css
 /* main.css or individual modules */
-@import "node_modules/@newlogic-digital/ui/src/styles/main.css"
+@import "@newlogic-digital/ui/src/styles/main.css"
 ```
 
 ```js
 /* main.js or individual modules */
-import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
+import "@newlogic-digital/ui/src/scripts/main.js"
 ```
 
 ### Requirements
 
 - [Node.js LTS (16.x)](https://nodejs.org/en/download/)
-- [NPM (7.x)](https://www.npmjs.com/package/npm) or any other package manager
-
-### Config
-
-Each Vituum project has to have config via `vite.config.js`, docs - [vituum.dev](https://vituum.dev)
+- [NPM (9.x)](https://www.npmjs.com/package/npm) or any other package manager
 
 ## Licence
 GNU GPLv3

package/package.json

@@ -1,50 +1,50 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Lightweight, modern and modular CSS framework with the best principles",
   "license": "GNU GPLv3",
   "scripts": {
+    "postinstall": "rm -rf node_modules/typed-query-selector",
     "dev": "vite",
     "preview": "vite preview",
-    "build": "vituum build",
-    "build:emails": "vituum build && vituum emails",
-    "build:headless": "vituum headless",
-    "emails": "vituum emails",
-    "cleanup": "vituum cleanup",
+    "build": "vite build --mode development",
+    "build-production": "vite build",
+    "build-emails": "vite build --mode emails",
     "eslint": "eslint 'src/scripts/**/*.js'",
-    "eslint:fix": "eslint 'src/scripts/**/*.js' --fix",
+    "eslint-fix": "eslint 'src/scripts/**/*.js' --fix",
     "stylelint": "stylelint 'src/styles/**/*.css'",
-    "stylelint:fix": "stylelint 'src/styles/**/*.css' --fix"
+    "stylelint-fix": "stylelint 'src/styles/**/*.css' --fix"
   },
   "dependencies": {
     "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "^3.1.1",
-    "swup": "^2.0.19",
+    "@hotwired/stimulus": "^3.2.1",
+    "winduum": "^0.3.0",
+    "swup": "^3.1.1",
+    "naja": "^2.5.0",
     "tippy.js": "^6.3.7",
-    "vanillajs-datepicker": "^1.2.0",
-    "css-has-pseudo": "^4.0.1"
+    "air-datepicker": "^3.3.5",
+    "css-has-pseudo": "^6.0.0"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^1.0.10",
+    "@newlogic-digital/core": "^2.0.1",
     "@types/grecaptcha": "^3.0.4",
-    "vituum": "^0.0.35",
-    "eslint-config-standard": "^17.0.0",
-    "stylelint-config-standard": "^29.0.0"
+    "eslint-config-standard": "^17.1.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-stylistic": "^0.4.3",
+    "postcss-custom-selectors": "^7.1.4"
   },
   "files": [
-    "src",
-    "tailwind.config.cjs",
-    "vite.config.js",
-    ".eslintrc",
-    ".stylelintrc",
-    "public/sw.js"
+    "src"
   ],
+  "exports": {
+    "./src/*": "./src/*"
+  },
   "engines": {
     "node": ">=16.0.0",
-    "npm": ">=7.10.0"
+    "npm": ">=9.0.0"
   },
   "repository": {
     "type": "git",

package/src/data/main.json

@@ -1,6 +1,5 @@
 {
   "lang": "en",
-  "template": "templates/Layout/Main.twig",
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
@@ -11,15 +10,10 @@
       "all": [
         "/src/styles/main.css",
         "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block"
-      ],
-      "tailwind": "/temp/tailwind.css",
-      "tailwind.src": "/src/styles/tailwind.css",
-      "ratio": "/temp/ratio.css"
+      ]
     },
     "js": {
-      "importmap": "/public/importmap.json",
-      "main": "/src/scripts/main.js",
-      "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"
+      "main": "/src/scripts/main.js"
     }
   },
   "layout": {

package/src/emails/{templates/Content.twig → templates.test/Content.latte}

@@ -4,11 +4,19 @@
             <tr>
                 <td>
                     <br />
-                    <div class="elm_content_heading">Thanks for your email:</div>
+                    <div class="elm_content_heading">Děkujeme za Váš zájem</div>
                     <br />
+                    Jsme opravdu rádi že jste se nám ozvali! Toto jsou Vaše údaje z formuláře:
+                    <br />
+                    <br />
+                    <p><strong>Jméno</strong>: Pavel Novák</p>
+                    <p><strong>Email</strong>: jmeno.prijmeni@email.cz</p>
+                    <p><strong>Telefon</strong>: +420111222333</p>
+                    <br/>
+                    <p><strong>Zpráva</strong>:</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae est dui. Vestibulum vehicula in mi in interdum. Aliquam quis tempor nibh. Duis tincidunt vel purus tincidunt iaculis. In bibendum leo justo, et elementum justo dapibus et. Aliquam eu elementum magna. Fusce egestas urna ac venenatis auctor. Phasellus felis leo, suscipit non est sit amet, lobortis pellentesque urna. Ut enim leo, posuere eget mauris vel, egestas pellentesque metus. Curabitur ut est ut orci blandit suscipit. Morbi lacinia sapien luctus lectus maximus, vitae gravida lectus aliquet. Vestibulum ut placerat diam. Fusce dapibus tincidunt justo, sed venenatis nisl porttitor vitae.</p>
                     <br />
-                    <div class="elm_content_info"><a href="https://www.example.com"><span>www.example.com</span></a></div>
+                    <div class="elm_content_info"><a href="https://www.nazevwebu.cz"><span>www.nazevwebu.cz</span></a></div>
                 </td>
             </tr>
         </table>

package/src/emails/{templates/Header.twig → templates.test/Header.latte}

@@ -1,7 +1,7 @@
 <tr class="elm_header">
     <td>
         <table class="elm_inner_container">
-            <tr>
+            <tr n:foreach="range(1,2) as $i">
                 <td>
                     <br />
                     <a href="#"><img src="https://via.placeholder.com/160x60" width="160" alt="" style="width: 160px" /></a>

package/src/emails/{templates/Layout.twig → templates.test/Layout.latte}

@@ -5,8 +5,8 @@
     <title>Email Template</title>
     <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style type="text/css">
-      @import 'styles/email.css';
+    <style type="text/css" n:syntax="off">
+      @import '/src/emails/styles/email.css';
     </style>
 </head>
 <body>

package/src/icons.svg

@@ -1,32 +1,38 @@
-<svg hidden="">
-    <symbol id="icon-chevron-left" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-    </symbol>
-    <symbol id="icon-chevron-right" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-    </symbol>
-    <symbol id="icon-angle-down" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
+<svg class="hidden">
+    <svg id="icon-chevron-left" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+    </svg>
+    <svg id="icon-chevron-right" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+    </svg>
+    <svg id="icon-angle-down" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
         <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" />
-    </symbol>
-    <symbol id="icon-angle-up" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
+    </svg>
+    <svg id="icon-angle-up" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
         <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" />
-    </symbol>
-    <symbol id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </symbol>
-    <symbol id="icon-x" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    </svg>
+    <svg id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+    <svg id="icon-x" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M6 18L18 6M6 6l12 12" />
-    </symbol>
-    <symbol id="icon-menu" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-    </symbol>
-    <symbol id="icon-moon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-    </symbol>
-    <symbol id="icon-sun" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-    </symbol>
-    <symbol id="icon-at-symbol" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
-    </symbol>
+    </svg>
+    <svg id="icon-menu" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+    <svg id="icon-moon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+    </svg>
+    <svg id="icon-sun" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+    </svg>
+    <svg id="icon-at-symbol" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
+    </svg>
+    <svg id="icon-calendar" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+    </svg>
+    <svg id="icon-clock" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
 </svg>

package/src/scripts/Components/CookieConsent.js

@@ -2,7 +2,7 @@ import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 import LibCookieConsent from '../Libraries/CookieConsent.js'
 
 LibStimulus.register('c-cookieconsent', class extends Controller {
-    connect() {
+    connect () {
         const selector = this.element
 
         if (document.querySelector('.c-form-cookieconsent') !== null) {
@@ -11,40 +11,37 @@ LibStimulus.register('c-cookieconsent', class extends Controller {
 
         if (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now()) {
             setTimeout(() => {
-                selector._addDataValue('state', 'active')
-                selector.classList.add('is-animate')
+                selector.classList.add('active', 'is-animate')
             }, 1500)
         }
+    }
 
-        selector.querySelector('[data-lib-cookieconsent-approve]').addEventListener('click', () => {
-            this.hide(['performance', 'marketing'])
-        })
+    approve () {
+        this.hide(['performance', 'marketing'])
+    }
 
-        selector.querySelector('[data-lib-cookieconsent-decline]').addEventListener('click', () => {
-            this.hide([])
-        })
+    decline () {
+        this.hide([])
     }
 
-    hide(type) {
+    hide (type) {
         LibCookieConsent.set(type)
         this.element.classList.remove('is-animate')
 
         setTimeout(() => {
-            this.element._removeDataValue('state', 'active')
+            this.element.classList.remove('active')
             this.element.remove()
         }, 500)
     }
 })
-
 LibStimulus.register('c-form-cookieconsent', class extends Controller {
-    connect() {
+    connect () {
         const selector = this.element
         const type = LibCookieConsent.getItem('lib-cookieconsent')
         const modal = document.querySelector('.c-cookieconsent')
 
         if (modal) {
-            modal.classList.remove('is-animate')
-            modal._removeDataValue('state', 'active')
+            modal.classList.remove('is-animate', 'active')
         }
 
         if (type !== null) {
@@ -58,27 +55,24 @@ LibStimulus.register('c-form-cookieconsent', class extends Controller {
                 }
             })
         }
+    }
 
-        selector.addEventListener('submit', e => {
-            e.preventDefault()
-
-            const type = []
-
-            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
-                input.checked && type.push(input.value)
-            })
+    update () {
+        const type = []
 
-            LibCookieConsent.set(type)
-            location.reload()
+        this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+            input.checked && type.push(input.value)
         })
+
+        LibCookieConsent.set(type)
+        location.reload()
     }
 
-    disconnect() {
+    disconnect () {
         const modal = document.querySelector('.c-cookieconsent')
 
         if (modal && (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now())) {
-            modal._addDataValue('state', 'active')
-            modal.classList.add('is-animate')
+            modal.classList.add('active', 'is-animate')
         }
     }
 })

package/src/scripts/Layout/Header.js

@@ -1,18 +1,32 @@
 import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
 
-LibStimulus.register('l-header', class extends Controller {
-    connect() {
-        if (document.querySelector('#l-nav') === null) {
-            this.element.insertAdjacentHTML('afterend', '<div id="l-nav" class="lib-drawer" data-lib-drawer-target="nav" data-action="scroll->lib-drawer#scroll"><div class="wrp_nav"><div class="wrp_nav_head"></div><div class="wrp_nav_body"></div></div></div>')
+LibStimulus.register('l-header',
+    /** @property {LibDrawer} libDrawerOutlet */
+    class extends Controller {
+        connect () {
+            if (document.querySelector('#l-nav') === null) {
+                this.element.insertAdjacentHTML('afterend', `
+                    <div id="l-nav" class="lib-drawer" data-controller="lib-drawer" data-action="scroll->lib-drawer#scroll" inert>
+                        <div class="l_nav">
+                            <div class="l_nav_head"></div>
+                            <div class="l_nav_body"></div>
+                        </div>
+                    </div>
+                `)
 
-            getController(document.body, 'lib-drawer').init()
+                const layoutNav = document.querySelector('#l-nav')
+                const logo = this.element.querySelector('.l_header_logo').outerHTML
+                const nav = this.element.querySelector('.l_header_nav').outerHTML
 
-            const layoutNav = document.querySelector('#l-nav')
-            const logo = this.element.querySelector('.elm_header_logo').outerHTML
-            const nav = this.element.querySelector('.elm_header_nav').outerHTML
+                layoutNav.querySelector('.l_nav_head').insertAdjacentHTML('beforeend', logo)
+                layoutNav.querySelector('.l_nav_body').insertAdjacentHTML('beforeend', nav)
+            }
+        }
 
-            layoutNav.querySelector('.wrp_nav_head').insertAdjacentHTML('beforeend', logo)
-            layoutNav.querySelector('.wrp_nav_body').insertAdjacentHTML('beforeend', nav)
+        showDrawer () {
+            /** @type {LibDrawer} */
+            const LibDrawer = getController(document.querySelector('[data-controller~="lib-drawer"]'), 'lib-drawer')
+            LibDrawer.show()
         }
     }
-})
+)

package/src/scripts/Layout/Main.js

@@ -1,30 +1,9 @@
-import { LibStimulus, Controller, loadStimulus } from '../Libraries/Stimulus.js'
-import { importScript } from '../Utils/Functions/+.js'
-import LibRipple from '../Libraries/Ripple.js'
-import LibAnchor from '../Libraries/Anchor.js'
-import LibDialog from '../Libraries/Dialog.js'
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 import LibTippy from '../Libraries/Tippy.js'
-import LibTabs from '../Libraries/Tabs.js'
-import LibNativeSlider from '../Libraries/NativeSlider.js'
-import cdn from '../Utils/cdn.js'
+import { initSlider, nextSlide, prevSlide, selectSlide } from '../Libraries/Slider.js'
 
 LibStimulus.register('lib', class extends Controller {
-    connect() {
-        if (!('scrollBehavior' in document.documentElement.style)) {
-            importScript(cdn.seamless).then(() => window.seamless.polyfill())
-        }
-    }
-
-    ripple(e) {
-        LibRipple(e)
-    }
-
-    anchor({ currentTarget }) {
-        arguments[0].preventDefault()
-        LibAnchor.action(currentTarget)
-    }
-
-    darkMode() {
+    darkMode () {
         if (document.documentElement.classList.contains('dark')) {
             localStorage.theme = 'light'
             document.documentElement.classList.remove('dark')
@@ -35,46 +14,37 @@ LibStimulus.register('lib', class extends Controller {
     }
 })
 
-LibStimulus.register('lib-dialog', class extends Controller {
-    async connect() {
-        if (this.element.getAttribute('data-lib-dialog-open')) {
-            const url = this.element.getAttribute('data-action-url')
+LibStimulus.register('lib-tippy', class extends Controller {
+    connect () {
+        const attributes = this.element.dataset.libTippy
 
-            if (url) {
-                await LibDialog.action(this.element, url, () => loadStimulus(document.querySelector('.lib-dialog')))
-            } else {
-                await LibDialog.show(document.querySelector(this.element.getAttribute('data-lib-dialog-open')).innerHTML, () => loadStimulus(document.querySelector('.lib-dialog')))
-            }
-        }
+        new LibTippy(this.element, attributes?.replace(/\s/g, '')?.split(','))
     }
+})
 
-    async show({ currentTarget }) {
-        const url = currentTarget.getAttribute('data-action-url')
-
-        await LibDialog.action(currentTarget, url)
-    }
+LibStimulus.register('lib-slider', class extends Controller {
+    static targets = ['slider', 'dots', 'progress', 'counterMin', 'counterMax']
 
-    async hide() {
-        await LibDialog.hide()
+    connect () {
+        initSlider(this.sliderTarget, {
+            paginationSelector: this.hasDotsTarget ? this.dotsTarget : null,
+            paginationItemClass: 'ui-dot',
+            progressSelector: this.hasProgressTarget ? this.progressTarget : null,
+            counterMinSelector: this.hasCounterMinTarget ? this.counterMinTarget : null,
+            counterMaxSelector: this.hasCounterMaxTarget ? this.counterMaxTarget : null,
+            pauseSelector: this.element.querySelectorAll('[data-action*="lib-slider"]')
+        })
     }
-})
 
-LibStimulus.register('lib-tabs', class extends Controller {
-    connect() {
-        LibTabs(this.element)
+    next () {
+        nextSlide(this.sliderTarget)
     }
-})
 
-LibStimulus.register('lib-ns', class extends Controller {
-    connect() {
-        LibNativeSlider(this.element.querySelector('[data-lib-ns]'), this.element)
+    prev () {
+        prevSlide(this.sliderTarget)
     }
-})
-
-LibStimulus.register('lib-tippy', class extends Controller {
-    connect() {
-        const attributes = this.element.getAttribute('data-lib-tippy')
 
-        new LibTippy(this.element, attributes !== null ? attributes.replace(/\s/g, '').split(',') : undefined)
+    select () {
+        selectSlide(this.sliderTarget)
     }
 })

package/src/scripts/Libraries/+.js

@@ -1,13 +1,12 @@
-export { default as Anchor } from './Anchor.js'
 export { default as CookieConsent } from './CookieConsent.js'
-export { default as Dialog } from './Dialog.js'
+import './Dialog.js'
 import './Drawer.js'
 import './Form.js'
-export { default as NativeSlider } from './NativeSlider.js'
+import './Naja.js'
 import './ReCaptcha.js'
-export { default as Ripple } from './Ripple.js'
+import './Ripple.js'
 import './Script.js'
+import './Slider.js'
 import './Stimulus.js'
 export { default as Swup } from './Swup.js'
-export { default as Tabs } from './Tabs.js'
 export { default as Tippy } from './Tippy.js'