@newlogic-digital/ui 3.1.0 → 3.2.0

package/README.md

@@ -23,8 +23,9 @@ Newlogic UI is component framework with easy syntax. Modern approach of CSS prop
 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,48 +33,49 @@ 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 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.
+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/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
+- support for new modern web features `:has`, `<dialog>`
 - performance optimization
 
 ## Licence

package/package.json

@@ -1,36 +1,42 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
-  "main": "gulpfile.js",
+  "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": {
-    "utils:eslint": "eslint 'src/scripts/**/*.js' --fix",
-    "utils:stylelint": "stylelint 'src/styles/**/*.css' --fix"
+    "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"
   },
-  "imports": {},
   "dependencies": {
     "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "3.0.1",
-    "swup": "2.0.14",
+    "@hotwired/stimulus": "3.1.0",
+    "swup": "2.0.19",
     "tippy.js": "^6.3.7",
     "vanillajs-datepicker": "^1.2.0"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "~0.9.5",
-    "eslint-config-standard": "^16.0.3",
-    "stylelint-config-standard": "^24.0.0"
+    "@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",
@@ -21,7 +22,6 @@
     }
   },
   "layout": {
-    "template": "Layout/Main.twig",
     "cookies": false,
     "nav": [
       {

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/scripts/Components/+.js

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

package/src/scripts/Components/CookieConsent.js

@@ -9,23 +9,20 @@ LibStimulus.register('c-cookieconsent', class extends Controller {
             return
         }
 
-        if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
+        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._hasDataValue('type', 'closable') &&
-        selector.addEventListener('click', e => {
-            if (e.target.closest('.c-cookieconsent > .wrp') === null) {
-                this.hide([])
-            }
-        })
-
         selector.querySelector('[data-lib-cookieconsent-approve]').addEventListener('click', () => {
             this.hide(['performance', 'marketing'])
         })
+
+        selector.querySelector('[data-lib-cookieconsent-decline]').addEventListener('click', () => {
+            this.hide([])
+        })
     }
 
     hide(type) {
@@ -42,10 +39,13 @@ LibStimulus.register('c-cookieconsent', class extends Controller {
 LibStimulus.register('c-form-cookieconsent', class extends Controller {
     connect() {
         const selector = this.element
-        const type = localStorage.getItem('lib-cookieconsent')
+        const type = LibCookieConsent.getItem('lib-cookieconsent')
+        const modal = document.querySelector('.c-cookieconsent')
 
-        document.querySelector('.c-cookieconsent').classList.remove('is-animate')
-        document.querySelector('.c-cookieconsent')._removeDataValue('state', 'active')
+        if (modal) {
+            modal.classList.remove('is-animate')
+            modal._removeDataValue('state', 'active')
+        }
 
         if (type !== null) {
             this.element.querySelectorAll('input:not([disabled])').forEach(input => {
@@ -74,9 +74,11 @@ LibStimulus.register('c-form-cookieconsent', class extends Controller {
     }
 
     disconnect() {
-        if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
-            document.querySelector('.c-cookieconsent')._addDataValue('state', 'active')
-            document.querySelector('.c-cookieconsent').classList.add('is-animate')
+        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/Libraries/+.js

@@ -2,10 +2,11 @@ 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 './Fetch.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'

package/src/scripts/Libraries/CookieConsent.js

@@ -1,19 +1,25 @@
 const LibCookieConsent = {
+    setItem: (key, value) => {
+        localStorage.setItem(key, value)
+    },
+    getItem: (key) => {
+        return localStorage.getItem(key)
+    },
     init: () => {
-        const type = localStorage.getItem('lib-cookieconsent')
+        const type = LibCookieConsent.getItem('lib-cookieconsent')
 
         if (type !== null) {
             JSON.parse(type).forEach(type => LibCookieConsent.append(type))
         }
     },
     set: (type) => {
-        localStorage.setItem('lib-cookieconsent', JSON.stringify(type))
-        localStorage.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
+        LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify(type))
+        LibCookieConsent.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
 
         if (type.length > 0) {
             type.forEach(type => LibCookieConsent.append(type))
         } else {
-            localStorage.setItem('lib-cookieconsent', JSON.stringify([]))
+            LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify([]))
             LibCookieConsent.remove()
         }
     },

package/src/scripts/{Components → Libraries}/Form.js

@@ -1,6 +1,11 @@
-import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
+import { LibStimulus, Controller, getController } from './Stimulus.js'
+
+LibStimulus.register('lib-form', class extends Controller {
+    connect() {
+        this.element.setAttribute('novalidate', '')
+        this.element.addEventListener('submit', e => this.validate(this.element, e))
+    }
 
-LibStimulus.register('c-form', class extends Controller {
     validate(element, e) {
         if (element.reportValidity() === false) {
             e.preventDefault()
@@ -26,8 +31,7 @@ LibStimulus.register('c-form', class extends Controller {
         })
     }
 
-    connect() {
-        this.element.setAttribute('novalidate', '')
-        this.element.addEventListener('submit', e => this.validate(this.element, e))
+    submitForm({ currentTarget }) {
+        currentTarget.form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
     }
 })

package/src/scripts/Libraries/Script.js

@@ -0,0 +1,19 @@
+import { LibStimulus, Controller } from './Stimulus.js'
+
+LibStimulus.register('lib-script', class extends Controller {
+    connect() {
+        const element = this.element
+        const script = document.createElement('script')
+
+        ;[...element.attributes].forEach(attribute => {
+            if (attribute.specified && !attribute.name.includes('type') && !attribute.name.includes('data-controller')) {
+                script.setAttribute(attribute.name, attribute.value)
+            }
+        })
+
+        script.innerHTML = element.innerHTML
+
+        element.parentElement.appendChild(script)
+        element.remove()
+    }
+})

package/src/scripts/Libraries/Swup.js

@@ -3,6 +3,7 @@ import { getController, loadStimulus } from './Stimulus.js'
 import LibAnchor from './Anchor.js'
 import LibDialog from './Dialog.js'
 import LibCookieConsent from './CookieConsent.js'
+import replaceTag from '../Utils/Functions/replaceTag.js'
 
 const LibSwup = new Swup({
     containers: ['#l-main', '#l-header'].filter(element => document.querySelector(element)),
@@ -28,15 +29,7 @@ LibSwup.on('animationOutDone', () => {
 LibSwup.on('contentReplaced', () => {
     const content = new DOMParser().parseFromString(LibSwup.cache.getCurrentPage().originalContent, 'text/html')
 
-    content.head.querySelectorAll('[data-lib-swup-replace]').forEach(element => {
-        const tag = document.querySelector(`[data-lib-swup-replace=${element.dataset.libSwupReplace}]`)
-
-        if (tag !== null) {
-            tag.outerHTML = element.outerHTML
-        } else {
-            document.head.insertAdjacentHTML('beforeend', element.outerHTML)
-        }
-    })
+    replaceTag(content)
 
     LibAnchor.init()
 

package/src/scripts/Ui/Input.js

@@ -77,9 +77,9 @@ LibStimulus.register('ui-input', class extends Controller {
 
             element.querySelector('[data-action="plus"]').addEventListener('click', () => {
                 const input = this.element.querySelector('input')
-                const num = parseInt(input.value === '' ? 0 : input.value) + parseInt(input.step)
+                const num = parseInt(input.value === '' ? 0 : input.value) + parseInt(input.step === '' ? 1 : input.step)
 
-                if (num <= input.max) {
+                if (num <= input.max || input.max === '') {
                     input.value = num
                     input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
@@ -87,9 +87,9 @@ LibStimulus.register('ui-input', class extends Controller {
 
             element.querySelector('[data-action="minus"]').addEventListener('click', () => {
                 const input = this.element.querySelector('input')
-                const num = parseInt(input.value) - parseInt(input.step)
+                const num = parseInt(input.value) - parseInt(input.step === '' ? 1 : input.step)
 
-                if (num >= input.min) {
+                if (num >= input.min || input.min === '') {
                     input.value = num
                     input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
@@ -101,7 +101,7 @@ LibStimulus.register('ui-input', class extends Controller {
         const date = element.querySelector('[type^="date"]')
 
         if (date !== null && !document.documentElement.classList.contains('mobile')) {
-            const lang = await import(`/* @vite-ignore */https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/js/i18n/locales/${document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang}.min.js`)
+            const lang = await import(`/* @vite-ignore */ https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/js/i18n/locales/${document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang}.min.js`)
             const { Datepicker } = await import('vanillajs-datepicker')
 
             await importStyle(cdn.datepicker)

package/src/scripts/Utils/+.js

@@ -0,0 +1,3 @@
+import './Functions/+.js'
+export { default as cdn } from './cdn.js'
+import './global.js'

package/src/scripts/Utils/Functions/+.js

@@ -1,6 +1,6 @@
 import './dataValue.js'
-export { default as fetchHandler } from './fetchHandler.js'
 export { default as importScript } from './importScript.js'
 export { default as importStyle } from './importStyle.js'
 export { default as inView } from './inView.js'
 export { default as loadStimulus } from './loadStimulus.js'
+export { default as replaceTag } from './replaceTag.js'

package/src/scripts/Utils/Functions/replaceTag.js

@@ -0,0 +1,12 @@
+export default function replaceTag(documentElement) {
+    documentElement.querySelectorAll('[data-lib-replace-tag]').forEach(element => {
+        const replaceTag = document.querySelector(`[data-lib-replace-tag=${element.dataset.libReplaceTag}]`)
+        const placement = element.closest('head') ? document.head : replaceTag.parentElement
+
+        replaceTag ? (replaceTag.outerHTML = element.outerHTML) : placement.insertAdjacentHTML('beforeend', element.outerHTML)
+
+        if (element.tagName === 'SCRIPT') {
+            document.querySelector(`[data-lib-replace-tag=${element.dataset.libReplaceTag}]`)._addDataValue('controller', 'lib-script')
+        }
+    })
+}

package/src/styles/Layout/Header.css

@@ -0,0 +1,54 @@
+:root {
+  --l-header-height: 4rem;
+  --l-scroll-padding-top: calc(var(--l-header-height) + 1rem);
+}
+
+#l-header {
+  z-index: var(--z-20);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0 2rem;
+  background-color: rgb(var(--color-dark));
+  color: rgb(var(--color-light));
+
+  @nest .dark & {
+    background-color: rgb(var(--color-background-100));
+  }
+
+  &.is-l-header-normal {
+    & ~ #l-main {
+      padding-top: var(--l-header-height);
+    }
+  }
+
+  & .wrp_header_body {
+    align-items: center;
+    height: var(--l-header-height);
+  }
+
+  & .elm_header_logo {
+    font-size: 1.5rem;
+    margin-right: 3rem;
+  }
+
+  & .elm_header_menu {
+    position: relative;
+    font-size: 1.75rem;
+
+    &::after {
+      position: absolute;
+      inset: -0.5rem;
+      content: "";
+    }
+  }
+
+  & .elm_header_nav {
+    --gx: 2rem;
+
+    & .ui-link {
+      padding: 1.25rem 0;
+    }
+  }
+}

package/src/styles/Libraries/NativeSlider.css

@@ -24,7 +24,7 @@
     display: none !important;
   }
 
-  &:not(.is-fade):not(.is-grabbing) {
+  &:not(.is-fade, .is-grabbing) {
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
   }

package/src/styles/Utils/+.css

@@ -0,0 +1,9 @@
+@import "default.css";
+@import "icons.css";
+@import "keyframes.css";
+@import "normalize.css";
+@import "print.css";
+@import "tailwind/+.css";
+@import "theme/+.css";
+@import "vars.css";
+@import "vendor.css";

package/src/styles/Utils/keyframes.css

@@ -48,7 +48,7 @@
     transform: translateY(2rem);
   }
 
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0);
   }
@@ -60,7 +60,7 @@
     transform: translateY(-2rem);
   }
 
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0);
   }
@@ -96,7 +96,7 @@
     transform: translateY(0);
   }
 
-  to {
+  100% {
     opacity: 0;
     transform: translateY(-2rem);
   }
@@ -108,7 +108,7 @@
     transform: translateY(0);
   }
 
-  to {
+  100% {
     opacity: 0;
     transform: translateY(2rem);
   }

package/src/styles/Utils/tailwind/+.css

@@ -0,0 +1,2 @@
+@import "base.css";
+@import "gutters.css";

package/src/styles/Utils/theme/+.css

@@ -0,0 +1 @@
+@import "main.css";

package/src/styles/main.css

@@ -11,3 +11,5 @@
 @import "Sections/+.css";
 @import "Libraries/+.css";
 @import "Utils/print.css";
+@import "Utils/tailwind/base.css";
+@import "Utils/tailwind/gutters.css";

package/src/templates/Components/CookieConsent.twig

@@ -20,10 +20,10 @@
         </div>
         <div class="wrp_c_foot {% if center %}flex-col space-y-6{% else %}space-x-10{% endif %}">
             <div class="col w-full">
-                <button class="ui-btn w-full" data-size="lg" aria-label="Souhlasím s použitím cookies" data-lib-cookieconsent-approve>Yes, I agree</button>
+                <button class="ui-btn w-full" data-size="lg" aria-label="Yes, I agree" data-lib-cookieconsent-approve>Yes, I agree</button>
             </div>
             <div class="col {% if not center %}pr-6{% endif %}">
-                <a href="/gdpr" class="ui-link" title="více informací & nastavení"><span>Information and settings</span></a>
+                <button class="ui-link" aria-label="I disagree" data-lib-cookieconsent-decline><span>I disagree</span></button>
             </div>
         </div>
     </div>

package/src/templates/Layout/Main.twig

@@ -31,7 +31,7 @@
 
         <script>
             (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) && document.documentElement.classList.add('dark')
-            document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); matchMedia('(hover: hover) and (pointer: fine)').matches && document.documentElement.classList.add('no-touch'); /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add('mobile'); document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/, '')); !function(e) { let t; (t = e.match(/(chrome|safari|firefox)/i)) && document.documentElement.classList.add(t[0]) } (navigator.userAgent.toLowerCase());
+            document.documentElement.className = document.documentElement.className.replace('no-js', 'js');matchMedia('(hover: hover) and (pointer: fine)').matches && document.documentElement.classList.add('no-touch');/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add('mobile');(p => document.documentElement.classList.add(p.includes('macintel') && navigator.maxTouchPoints > 2 ? 'ipad' : p))(navigator.platform.toLowerCase().replace(/ .*/, ''));(u => document.documentElement.classList.add(u && u[0]))(navigator.userAgent.toLowerCase().match(/chrome|safari|firefox/i))
         </script>
 
         <script src="{{ assets.js.main|asset }}" type="module"></script>

package/src/templates/Sections/Ui.twig

@@ -368,11 +368,6 @@
                                     <span>Drawer</span>
                                 </a>
                             </li>
-                            <li class="col col-12">
-                                <a href="#fetch" class="ui-link" title="">
-                                    <span>Fetch</span>
-                                </a>
-                            </li>
                             <li class="col col-12">
                                 <a href="#hint" class="ui-link" title="">
                                     <span>Hint</span>
@@ -421,7 +416,7 @@
                         </ul>
                     </div>
                     <div class="mb-5">
-                        <h2 class="ui-title uppercase text-primary mb-3">Ostatní</h2>
+                        <h2 class="ui-title uppercase text-primary mb-3">Other</h2>
                         <ul class="row flex-col g-2">
                             <li class="col col-12">
                                 <a href="#functions" class="ui-link" title="">
@@ -443,19 +438,19 @@
                         <div class="col-12" style="padding-top: 0">
                             <h1 class="ui-heading">Get started</h1>
                             <div class="ui-text">
-                                <p>Minimal version <b>Node.js 14+</b> and <b>NPM 7+</b></p>
+                                <p>Minimal version <b>Node.js 16+</b>, <b>NPM 7+</b> or any other package manager.</p>
                             </div>
                         </div>
                         <div class="col-12" id="instalation">
-                            <h1 class="ui-title uppercase text-primary mb-5">Instalation</h1>
+                            <h1 class="ui-title uppercase text-primary mb-5">Installation</h1>
                             <div class="ui-text">
-                                <p>In existing project (with <b>Newlogic Core</b>)</p>
+                                <p>In existing project (with <b>Vituum and Newlogic Core</b>)</p>
                             </div>
                             {% code "bash" %}
                                 $ npm i
                             {% endcode %}
                             <div class="ui-text">
-                                <p>Creating a new project  (with <b>Newlogic Core</b>)</p>
+                                <p>Creating a new project  (with <b>Vituum and Newlogic Core</b>)</p>
                             </div>
                             {% code "bash" %}
                                 $ git clone --depth 1 https://github.com/newlogic-digital/ui.git .
@@ -479,7 +474,7 @@
                         <div class="col-12" id="core">
                             <h1 class="ui-title uppercase text-primary mb-5">Core</h1>
                             <div class="ui-text">
-                                <p><b>Newlogic Core</b> is used as the main toolset, the complete documentation is at  <a href="https://core.newlogic.cz" target="_blank">core.newlogic.cz</a></p>
+                                <p><b>Vituum</b> with Newlogic Core is used as the main toolset, the complete documentation is at  <a href="https://vituum.dev" target="_blank">vituum.dev</a></p>
                                 <p>Framework can also be used with other tools, more information is in the section <a href="#build" title="">Build</a></p>
                             </div>
                         </div>
@@ -941,10 +936,10 @@
                         </div>
                         <div class="col-12">
                             <div class="ui-text mb-5">
-                                <p>Example form, for javascript form validation upon send you can add attribute <code>data-controller="c-form"</code></p>
+                                <p>Example form, for javascript form validation upon send you can add attribute <code>data-controller="lib-form"</code></p>
                             </div>
                             {% code "html:mirror" %}
-                                <form class="c-form" data-controller="c-form">
+                                <form class="c-form" data-controller="lib-form">
                                     <div class="wrp_form_body grid gap-3">
                                         <div class="ui-select">
                                             <select required>
@@ -1677,14 +1672,6 @@
                                 <p>The content is being prepared ...</p>
                             </div>
                         </div>
-                        <div class="col-12" id="fetch">
-                            <h1 class="ui-title uppercase text-primary mb-5">Fetch</h1>
-                            <div class="ui-text">
-                                <p>Located in <code>src/scripts/Libraries/Fetch.js</code></p>
-                                <p></p>
-                                <p>The content is being prepared ...</p>
-                            </div>
-                        </div>
                         <div class="col-12" id="hint">
                             <h1 class="ui-title uppercase text-primary mb-5">Hint</h1>
                             <div class="ui-text">
@@ -1807,7 +1794,7 @@
                                 <p>It can be evaluated upon submitting the form, with attribute <code>data-action="submit->lib-recaptcha#submit"</code></p>
                             </div>
                             {% code "html" %}
-                                <form data-controller="lib-recaptcha" data-lib-recaptcha-api="RECAPTCHA_KEY" data-lib-recaptcha-action="contact" data-action="submit->lib-fetch#form">
+                                <form data-controller="lib-recaptcha" data-lib-recaptcha-api="RECAPTCHA_KEY" data-lib-recaptcha-action="contact" data-action="submit->lib-recaptcha#submit">
                                     <input name="gtoken" type="hidden">
                                     <button>Send</button>
                                 </form>
@@ -1817,7 +1804,7 @@
                             <h1 class="ui-title uppercase text-primary mb-5">Ripple</h1>
                             <div class="ui-text">
                                 <p>The ripple effect is automatically applied to buttons and other components</p>
-                                <p>The effect is possible apply anywhere using the attribute <code>data-action="click->lib#ripple"</code>
+                                <p>The effect is possible apply anywhere using the attribute <code>data-action="click->lib#ripple"</code></p>
                                 <p>Background color can be changed with CSS property <code>--lib-ripple-bg</code></p>
                                 <p></p>
                                 <h3>Methods</h3>
@@ -1994,7 +1981,9 @@
                             </div>
                             {% code "html:mirror" %}
                                 <button class="ui-btn" type="button" data-type="square" data-controller="lib-tippy" data-lib-tippy="dropdown-full, /json-tippy.json" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
-                                    <span class="icon icon-chevron-down"></span>
+                                    <svg class="icon">
+                                        <use href="#icon-angle-down"></use>
+                                    </svg>
                                 </button>
                             {% endcode %}
                             <div class="ui-text mb-5">
@@ -2071,7 +2060,7 @@
                         <div class="col-12" id="build">
                             <h1 class="ui-title uppercase text-primary mb-5">Build</h1>
                             <div class="ui-text">
-                                <p>Newlogic UI can be used with other tools, without the need to use Newlogic Core or in a completely different environment than NodeJS</p>
+                                <p>Newlogic UI can be used with other tools, without the need to use Vituum and Newlogic Core or in a completely different environment than NodeJS</p>
                                 <p></p>
                                 <p>Following PostCSS plugins are used:</p>
                                 {% code "json" %}
@@ -2089,10 +2078,10 @@
                                 <p></p>
                                 <p>Tailwind config is located at root in <code>tailwind.config.cjs</code></p>
                                 <p></p>
-                                <p>The CSS framework can then be configured for use in modern build tools such as Vite or Snowpack. </p>
+                                <p>The CSS framework can then be configured for use in any modern build tools such as Vite, Webpack, Parcel, etc.</p>
                                 <p>Theoretically it is even possible to build outside the NodeJS environment in <a href="https://deno.land/manual/tools/bundler" target="_blank">Deno</a> with <a href="https://github.com/postcss/postcss-deno" target="_blank">PostCSS</a></p>
                                 <p></p>
-                                <p>Without use of Newlogic Core you can't use compilation of twig templates from <code>src/templates</code></p>
+                                <p>Without use of Vituum you can't use compilation of twig templates from <code>src/templates</code></p>
                             </div>
                             <hr/>
                         </div>

package/src/views/dialog-basic.json.twig

@@ -0,0 +1,3 @@
+{% json 'dialog' %}
+    {% include '@templates/Components/Dialogs/Basic.twig' %}
+{% endjson %}

package/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vituum'
+import core from '@newlogic-digital/core'
+
+export default defineConfig({
+    integrations: [core()]
+})

package/gulpfile.js

@@ -1,41 +0,0 @@
-import { defineConfig } from '@newlogic-digital/core'
-import cms from "./src/module.cms.js"
-
-export default defineConfig({
-    config: true,
-    modules: {cms},
-    serve: {
-        https: true
-    },
-    scripts: {
-        importResolution: {
-            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Utils/Functions', 'Ui']
-        },
-        importMap: {
-            build: false,
-            trailingSlashes: /(vanillajs-datepicker)/
-        }
-    },
-    styles: {
-        purge: {
-            enabled: true,
-            content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'www/templates/**/*.tpl', 'temp/cdn/*.js', 'admin_ex/js/templates/*.html', 'index.html'],
-            options: {
-                safelist: {
-                    standard: [/(class|is-|to-|grecaptcha)/],
-                    deep: [/(ui-text|wsw|datepicker)/]
-                }
-            }
-        },
-        vendor: {
-            path: 'Utils/vendor.css'
-        },
-        importResolution: {
-            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Ui']
-        },
-        themePath: 'Utils/theme/{THEME}.{FORMAT}',
-        postcss: {
-            extend: []
-        }
-    }
-})

package/src/styles/tailwind.css

@@ -1,2 +0,0 @@
-@import "Utils/tailwind/base.css";
-@import "Utils/tailwind/gutters.css";

package/src/templates/dialog-basic.twig

@@ -1,3 +0,0 @@
-{% json 'dialog' %}
-    {% include 'Components/Dialogs/Basic.twig' %}
-{% endjson %}