@newlogic-digital/ui 3.0.3 → 3.2.0

package/README.md

@@ -10,9 +10,7 @@
 
 # 🎨 Newlogic UI
 
-> v3 is still in early development
-
-Modern and modular CSS framework with the best principles.
+Lightweight, modern and modular CSS framework with the best principles
 
 - 💡 Modern
 - 📦 Modular
@@ -20,11 +18,14 @@ Modern and modular CSS framework with the best principles.
 - ✨️ Progressive
 - ⚡️ Fast
 
-Newlogic UI is component framework with simple syntax. Inspired by popular frameworks like Bootstrap and Bulma. It uses Tailwind CSS for utility classes. The modern approach comes first.
+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
+
+Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP
 
 ## ⚙️ Under the hood
-* **[Newlogic Core](https://core.newlogic.cz/)** - set of tools that can be used to create modern web applications
-* **[ESM](https://tailwindcss.com/)** - completely written in modern JS syntax - ES8+, ES module, etc.
+* **[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.
 * **[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
@@ -32,53 +33,50 @@ Newlogic UI is component framework with simple syntax. Inspired by popular frame
 * **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.
 
 
-The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS code and contains other tools for web development. The source code is written in way that it can be used with other tools or a completely different environment than NodeJS, such as Deno. In general the rule is that the source code should be executable in current or future browsers, so it's written with W3C standards in mind. The framework is modular and you can really use only what is needed for your project.
+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.
 
-## 🪄 Instalation
+## 🪄 Get started
 
-Creating a new project (using Newlogic Core)
+Creating a new project (using Vituum)
 ```sh
 $ git clone --depth 1 https://github.com/newlogic-digital/ui.git newlogic-ui-project
 $ cd newlogic-ui-project && npm i
 ```
 ```sh
-$ npx gulp serve
+$ vite
 ```
 or
 ```sh
-$ npx gulp production
+$ vituum build
 ```
 ___
 Or in any other environment
 ```sh
-$ npm i @newlogic-newlogic/ui
+$ npm i @newlogic-digital/ui
 ```
 
 ```css
 /* main.css or individual modules */
-@import "node_modules/@newlogic/ui/src/icons/style.css"
-@import "node_modules/@newlogic/ui/src/styles/main.css"
+@import "node_modules/@newlogic-digital/ui/src/styles/main.css"
 ```
 
 ```js
 /* main.js or individual modules */
-import "node_modules/@newlogic/ui/src/scripts/main.js"
+import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
 ```
 
 ### Requirements
 
-- [Node.js LTS (14.x)](https://nodejs.org/en/download/)
-- [NPM (7.x)](https://www.npmjs.com/package/npm) or [Yarn (2.x)](https://yarnpkg.com/)
+- [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 Newlogic Core project has to have config via `gulpfile.js`, docs - [core.newlogic.cz](https://core.newlogic.cz/)
+Each Vituum project has to have config via `vite.config.js`, docs - [vituum.dev](https://vituum.dev)
 
 ## 📌 Future plans
-- finishing docs and translating it to english
-- lighthouse optimization
-- upgrading form elements
-- new elements - dropdown, notificaton, snack and more
+- support for new modern web features `:has`, `<dialog>`
+- performance optimization
 
 ## Licence
 GNU GPLv3

package/package.json

@@ -1,31 +1,42 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.0.3",
+  "version": "3.2.0",
   "type": "module",
-  "main": "gulpfile.js",
+  "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
-  "description": "Modern and modular CSS framework with the best principles",
+  "description": "Lightweight, modern and modular CSS framework with the best principles",
   "license": "GNU GPLv3",
-  "imports": {},
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "build": "vituum build",
+    "build:headless": "vituum headless",
+    "cleanup": "vituum cleanup",
+    "eslint": "eslint 'src/scripts/**/*.js'",
+    "eslint:fix": "eslint 'src/scripts/**/*.js' --fix",
+    "stylelint": "stylelint 'src/styles/**/*.css'",
+    "stylelint:fix": "stylelint 'src/styles/**/*.css' --fix"
+  },
   "dependencies": {
-    "@simonwep/pickr": "^1.8.0",
-    "cleave.js": "^1.6.0",
-    "stimulus": "2.0.0",
-    "swup": "2.0.14",
-    "vanillajs-datepicker": "^1.1.4"
+    "@simonwep/pickr": "^1.8.2",
+    "@hotwired/stimulus": "3.1.0",
+    "swup": "2.0.19",
+    "tippy.js": "^6.3.7",
+    "vanillajs-datepicker": "^1.2.0"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^0.4.4",
-    "postcss-mixins": "^7.0.3"
+    "@newlogic-digital/core": "^1.0.0",
+    "vituum": "^0.0.28",
+    "eslint-config-standard": "^17.0.0",
+    "stylelint-config-standard": "^28.0.0"
   },
   "files": [
     "src",
     "gulpfile.js"
   ],
   "engines": {
-    "node": ">=14.0.0",
-    "npm": ">=7.10.0",
-    "yarn": ">=2.3.0"
+    "node": ">=16.0.0",
+    "npm": ">=7.10.0"
   },
   "repository": {
     "type": "git",

package/src/{main.json → data/main.json}

@@ -1,4 +1,5 @@
 {
+  "template": "templates/Layout/Main.twig",
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
@@ -8,27 +9,28 @@
     "css": {
       "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",
-        "/src/icons/iconfont.css"
+        "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block"
       ],
-      "preload": "/src/styles/preload.css",
       "tailwind": "/temp/tailwind.css",
-      "tailwind.src": "/src/styles/tailwind.css"
+      "tailwind.src": "/src/styles/tailwind.css",
+      "ratio": "/temp/ratio.css"
     },
     "js": {
       "importmap": "/public/importmap.json",
-      "core": "/src/scripts/main.js",
-      "es-module-shims": "https://cdn.jsdelivr.net/npm/es-module-shims@0.10.4/dist/es-module-shims.js",
-      "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"
+      "main": "/src/scripts/main.js",
+      "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"
     }
   },
   "layout": {
-    "template": "Layout/Main.twig",
-    "cookies": true,
+    "cookies": false,
     "nav": [
       {
-        "name": "Domů",
+        "name": "Home",
         "url": "/"
+      },
+      {
+        "name": "Documentation",
+        "url": "/ui"
       }
     ]
   },
@@ -47,4 +49,4 @@
     "8x5": "data:image/gif;base64,R0lGODlhCAAFAIAAAP///wAAACwAAAAACAAFAAACBYSPqctYADs=",
     "3x2": "data:image/gif;base64,R0lGODlhAwACAIAAAP///wAAACwAAAAAAwACAAACAoRfADs="
   }
-}
+}

package/src/emails/email.css

@@ -1,7 +1,7 @@
 @import "../styles/Utils/theme/main.css";
 
 :root {
-  --width : 660px;
+  --width: 660px;
   --container: 30px;
 }
 
@@ -72,6 +72,6 @@ p {
 
 @media print {
   * {
-    -webkit-print-color-adjust:exact;
+    -webkit-print-color-adjust: exact;
   }
-}
+}

package/src/emails/email.twig

@@ -6,7 +6,7 @@
         <!--[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" n:syntax="off">
-            {{ fetch ("/temp/emails/email.css") }}
+            @import './email.css';
         </style>
     </head>
     <body>

package/src/icons.svg

@@ -0,0 +1,32 @@
+<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">
+        <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">
+        <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">
+        <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>

package/src/scripts/Components/+.js

@@ -1,2 +1 @@
-import './CookieConsent.js';
-import './Form.js';
+import './CookieConsent.js'

package/src/scripts/Components/CookieConsent.js

@@ -1,80 +1,84 @@
-import {LibStimulus, Controller} from "../Libraries/Stimulus.js";
-import LibCookieConsent from "../Libraries/CookieConsent.js";
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import LibCookieConsent from '../Libraries/CookieConsent.js'
 
-LibCookieConsent.init();
-
-LibStimulus.register("c-cookieconsent", class extends Controller {
+LibStimulus.register('c-cookieconsent', class extends Controller {
     connect() {
-        const selector = this.element;
+        const selector = this.element
+
+        if (document.querySelector('.c-form-cookieconsent') !== null) {
+            return
+        }
 
-        if (localStorage.getItem('cookieconsent') === null) {
+        if (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now()) {
             setTimeout(() => {
-                selector._addDataValue("state", "active");
-                selector.classList.add("is-animate");
-            },1500);
+                selector._addDataValue('state', 'active')
+                selector.classList.add('is-animate')
+            }, 1500)
         }
 
-        selector.addEventListener("click", () => {
-            selector.classList.add("is-mobile-show");
-        });
-
-        selector.querySelector("[data-lib-cookieconsent-approve]").addEventListener("click", () => {
-            LibCookieConsent.set("approve");
-            selector.classList.remove("is-animate");
-
-            setTimeout(function(){
-                selector._removeDataValue("state", "active");
-                selector.remove();
-            },500);
-        });
-
-        selector.querySelector("[data-lib-cookieconsent-decline]").addEventListener("click", () => {
-            LibCookieConsent.set("performance");
-            selector.classList.remove("is-animate");
-
-            setTimeout(function(){
-                selector._removeDataValue("state", "active");
-                selector.remove();
-            },500);
-        });
+        selector.querySelector('[data-lib-cookieconsent-approve]').addEventListener('click', () => {
+            this.hide(['performance', 'marketing'])
+        })
+
+        selector.querySelector('[data-lib-cookieconsent-decline]').addEventListener('click', () => {
+            this.hide([])
+        })
+    }
+
+    hide(type) {
+        LibCookieConsent.set(type)
+        this.element.classList.remove('is-animate')
+
+        setTimeout(() => {
+            this.element._removeDataValue('state', 'active')
+            this.element.remove()
+        }, 500)
     }
-});
+})
 
-LibStimulus.register("c-form-cookieconsent", class extends Controller {
+LibStimulus.register('c-form-cookieconsent', class extends Controller {
     connect() {
-        const selector = this.element;
-
-        if (localStorage.getItem('cookieconsent') !== null) {
-            if (localStorage.getItem('cookieconsent') === "approve") {
-                let type = localStorage.getItem('cookieconsent_type');
-                if (type !== null) {
-                    if (type === "performance") {
-                        selector.querySelector(`input[value="performance"]`).checked = true;
-                    } else {
-                        selector.querySelector(`input[value="approve"]`).checked = true;
-                    }
-                } else {
-                    selector.querySelector(`input[value="approve"]`).checked = true;
+        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')
+        }
+
+        if (type !== null) {
+            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+                input.checked = false
+            })
+
+            JSON.parse(type).forEach(type => {
+                if (selector.querySelector(`input[value="${type}"]`) !== null) {
+                    selector.querySelector(`input[value="${type}"]`).checked = true
                 }
-            } else if (localStorage.getItem('cookieconsent') === "decline") {
-                selector.querySelector(`input[value="decline"]`).checked = true;
-            }
+            })
         }
 
-        selector.addEventListener("submit", (e) => {
-            e.preventDefault();
+        selector.addEventListener('submit', e => {
+            e.preventDefault()
+
+            const type = []
 
-            let value = (new FormData(e.target)).get("cookies");
+            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+                input.checked && type.push(input.value)
+            })
 
-            if (value === "approve") {
-                LibCookieConsent.set("marketing");
-                location.reload();
-            } else if (value === "performance") {
-                LibCookieConsent.set("performance");
-                location.reload();
-            } else if (value === "decline") {
-                LibCookieConsent.set("decline", () => location.reload());
-            }
+            LibCookieConsent.set(type)
+            location.reload()
         })
     }
-});
+
+    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')
+        }
+    }
+})

package/src/scripts/Layout/+.js

@@ -1 +1,2 @@
-import './Main.js';
+import './Header.js'
+import './Main.js'

package/src/scripts/Layout/Header.js

@@ -0,0 +1,18 @@
+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>')
+
+            getController(document.body, 'lib-drawer').init()
+
+            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('.wrp_nav_head').insertAdjacentHTML('beforeend', logo)
+            layoutNav.querySelector('.wrp_nav_body').insertAdjacentHTML('beforeend', nav)
+        }
+    }
+})

package/src/scripts/Layout/Main.js

@@ -1,76 +1,80 @@
-import {LibStimulus, Controller, loadStimulus} from "../Libraries/Stimulus.js";
-import {bodyLoaded, importScript} from "../Utils/Functions/+.js";
-import LibRipple from "../Libraries/Ripple.js";
-import LibAnchor from "../Libraries/Anchor.js";
-import LibDialog from "../Libraries/Dialog.js";
-import LibTabs from "../Libraries/Tabs.js";
-import LibNativeSlider from "../Libraries/NativeSlider.js";
-import cdn from "../Utils/cdn.js";
+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 LibTippy from '../Libraries/Tippy.js'
+import LibTabs from '../Libraries/Tabs.js'
+import LibNativeSlider from '../Libraries/NativeSlider.js'
+import cdn from '../Utils/cdn.js'
+
+LibStimulus.register('lib', class extends Controller {
+    connect() {
+        if (!('scrollBehavior' in document.documentElement.style)) {
+            importScript(cdn.seamless).then(() => window.seamless.polyfill())
+        }
+    }
 
-LibStimulus.register("lib", class extends Controller {
     ripple(e) {
-        LibRipple(e.currentTarget, e)
+        LibRipple(e)
     }
 
     anchor(e) {
-        e.preventDefault();
+        e.preventDefault()
         LibAnchor.action(e.currentTarget)
     }
 
-    darkMode(e) {
-        let currentTarget = e.currentTarget;
-
+    darkMode() {
         if (document.documentElement.classList.contains('dark')) {
-            localStorage.theme = 'light';
-            document.documentElement.classList.remove('dark');
-            currentTarget.classList.remove("icon-light");
+            localStorage.theme = 'light'
+            document.documentElement.classList.remove('dark')
         } else {
-            localStorage.theme = 'dark';
-            document.documentElement.classList.add('dark');
-            currentTarget.classList.add("icon-light");
+            localStorage.theme = 'dark'
+            document.documentElement.classList.add('dark')
         }
     }
-});
+})
 
-LibStimulus.register("lib-dialog", class extends Controller {
-    connect() {
-        let element = this.element;
-
-        if (typeof element.dataset.libDialogOpen !== "undefined") {
-            let url = element.getAttribute("data-action-url");
+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')
 
             if (url) {
-                LibDialog.action(element, url, () => loadStimulus(document.querySelector(".lib-dialog")) );
+                await LibDialog.action(this.element, url, () => loadStimulus(document.querySelector('.lib-dialog')))
             } else {
-                LibDialog.show(document.querySelector(element.dataset.libDialogOpen).innerHTML, () => loadStimulus(document.querySelector(".lib-dialog")));
+                await LibDialog.show(document.querySelector(this.element.getAttribute('data-lib-dialog-open')).innerHTML, () => loadStimulus(document.querySelector('.lib-dialog')))
             }
         }
     }
 
-    show(e) {
-        let element = e.currentTarget;
-        let url = element.getAttribute("data-action-url");
+    async show({ currentTarget }) {
+        const url = currentTarget.getAttribute('data-action-url')
 
-        LibDialog.action(element, url, () => loadStimulus(document.querySelector(".lib-dialog")));
+        await LibDialog.action(currentTarget, url)
     }
 
-    hide() {
-        LibDialog.hide();
+    async hide() {
+        await LibDialog.hide()
     }
-});
+})
 
-LibStimulus.register("lib-tabs", class extends Controller {
+LibStimulus.register('lib-tabs', class extends Controller {
     connect() {
-        LibTabs(this.element);
+        LibTabs(this.element)
     }
-});
+})
 
-LibStimulus.register("lib-ns", class extends Controller {
+LibStimulus.register('lib-ns', class extends Controller {
     connect() {
-        if (!('scrollBehavior' in document.documentElement.style)) {
-            importScript(cdn.seamless).then(() => window.seamless.polyfill())
-        }
+        LibNativeSlider(this.element.querySelector('[data-lib-ns]'), this.element)
+    }
+})
+
+LibStimulus.register('lib-tippy', class extends Controller {
+    connect() {
+        const attributes = this.element.getAttribute('data-lib-tippy')
 
-        bodyLoaded(() => LibNativeSlider(this.element.querySelector("[data-lib-ns]"), this.element))
+        new LibTippy(this.element, attributes !== null ? attributes.replace(/\s/g, '').split(',') : undefined)
     }
-});
+})

package/src/scripts/Libraries/+.js

@@ -1,10 +1,13 @@
-export { default as Anchor } from './Anchor.js';
-export { default as CookieConsent } from './CookieConsent.js';
-export { default as Dialog } from './Dialog.js';
-import './Drawer.js';
-export { default as NativeSlider } from './NativeSlider.js';
-import './ReCaptcha.js';
-export { default as Ripple } from './Ripple.js';
-import './Stimulus.js';
-export { default as Swup } from './Swup.js';
-export { default as Tabs } from './Tabs.js';
+export { default as Anchor } from './Anchor.js'
+export { default as CookieConsent } from './CookieConsent.js'
+export { default as Dialog } from './Dialog.js'
+import './Drawer.js'
+import './Form.js'
+export { default as NativeSlider } from './NativeSlider.js'
+import './ReCaptcha.js'
+export { default as Ripple } from './Ripple.js'
+import './Script.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'