@newlogic-digital/ui 3.5.0 → 4.0.0

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://ui.newlogic.cz/" target="_blank" rel="noopener noreferrer">
-    <img width="180" src="https://ui.newlogic.cz/favicons/android-chrome-192x192.png" alt="Logo">
+    <img width="180" src="https://ui.newlogic.cz/favicon.svg" alt="Logo">
   </a>
 </p>
 <p align="center">
@@ -10,7 +10,7 @@
 
 # 🎨 Newlogic UI
 
-Lightweight, modern and modular CSS framework with the best principles
+Where Innovation Meets Simplicity.
 
 - 💡 Modern
 - 📦 Modular
@@ -18,41 +18,37 @@ Lightweight, modern and modular CSS framework with the best principles
 - ✨️ Progressive
 - ⚡️ Fast
 
-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 only **28 kB** and mainly intended for use on backend rendered websites and applications with PHP framework Nette
+Component framework for modern backend driven web applications. Powered by Vite and Winduum.
 
 ## ⚙️ Under the hood
-* **[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
+* **[Vituum](https://vituum.dev/)** - plugins for Vite, adds support for template engines, and more.
+* **[Vite](https://vituum.dev/)** - next generation frontend tooling
+* **[Winduum](https://winduum.dev/)** - a small modest CSS component framework for TailwindCSS
+* **[Tailwind CSS](https://tailwindcss.com/)** - rapidly build modern websites without ever leaving your HTML
+* **[Naja](https://naja.js.org/)** - a full-featured JS client-side AJAX library for Nette Framework
 * **[Stimulus](https://stimulus.hotwire.dev/)** - a modest JavaScript framework for the HTML you already have
-* **Dark mode** - creating dark mode was never easier
-* **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.
-
+* **[Swup](https://next.ui.newlogic.cz/docs/.html)** - versatile and extensible page transition library for server-rendered websites
 
-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 (with Vituum and Newlogic Core)
+Creating a new project
 ```sh
-$ git clone --depth 1 https://github.com/newlogic-digital/ui.git newlogic-ui-project
-$ cd newlogic-ui-project && npm i
+git clone --depth 1 https://github.com/newlogic-digital/ui.git newlogic-ui-project
+cd newlogic-ui-project && npm i
 ```
 ```sh
-$ vite
+npm run dev
 ```
 or
 ```sh
-$ vituum build
+npm run build
 ```
 ___
 Or in any other environment
 ```sh
-$ npm i @newlogic-digital/ui
+npm i @newlogic-digital/ui
 ```
 
 ```css
@@ -67,8 +63,8 @@ import "@newlogic-digital/ui/src/scripts/main.js"
 
 ### Requirements
 
-- [Node.js LTS (16.x)](https://nodejs.org/en/download/)
-- [NPM (9.x)](https://www.npmjs.com/package/npm) or any other package manager
+- [Node.js LTS (22.x)](https://nodejs.org/en/download/)
+- [NPM (10.x)](https://www.npmjs.com/package/npm) or any other package manager
 
 ## Licence
 GNU GPLv3

package/package.json

@@ -1,41 +1,58 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.5.0",
+  "version": "4.0.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",
+    "postinstall": "rm -rf node_modules/typed-query-selector && ncu",
+    "dev": "npm run cleanup && vite",
+    "dev-emails": "npm run cleanup && vite --mode emails",
     "preview": "vite preview",
-    "build": "vite build --mode development",
-    "build-production": "vite build",
+    "build": "npm run cleanup && vite build --mode development",
+    "build-production": "npm run cleanup && vite build",
     "build-emails": "vite build --mode emails",
+    "cleanup": "git clean -qdfX public -e \\!userfiles",
     "eslint": "eslint 'src/scripts/**/*.js'",
     "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",
+    "npm-update": "ncu -u && npm update",
+    "npm-sort": "npm r -S example && npm r -D example"
   },
   "dependencies": {
-    "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "^3.2.1",
-    "winduum": "^0.3.0",
-    "swup": "^3.1.1",
-    "naja": "^2.5.0",
-    "tippy.js": "^6.3.7",
-    "air-datepicker": "^3.3.5",
-    "css-has-pseudo": "^6.0.0"
+    "@floating-ui/dom": "^1.6.13",
+    "@hotwired/stimulus": "^3.2.2",
+    "@newlogic-digital/cookieconsent-js": "^1.0.0",
+    "@newlogic-digital/naja-extensions": "^1.0.0",
+    "@newlogic-digital/stimulus-components": "^1.0.0",
+    "@newlogic-digital/swup-plugins": "^1.0.0",
+    "@newlogic-digital/utils-js": "^1.1.1",
+    "naja": "^3.2.1",
+    "slide-element": "^2.3.1",
+    "swup": "^4.8.1",
+    "winduum": "^2.1.0",
+    "winduum-stimulus": "^2.0.9"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^2.0.1",
-    "@types/grecaptcha": "^3.0.4",
-    "eslint-config-standard": "^17.1.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-stylistic": "^0.4.3",
-    "postcss-custom-selectors": "^7.1.4"
+    "@newlogic-digital/core": "^3.0.0",
+    "@stylistic/stylelint-config": "^2.0.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@vituum/vite-plugin-tailwindcss": "^1.2.0",
+    "eslint": "^9.19.0",
+    "neostandard": "^0.12.0",
+    "npm-check-updates": "^17.1.14",
+    "stylelint-config-standard": "^37.0.0",
+    "tailwindcss": "^3.4.17"
   },
+  "browserslist": [
+    "> 1%",
+    "last 2 major versions",
+    "not kaios > 0",
+    "not dead"
+  ],
   "files": [
     "src"
   ],
@@ -43,8 +60,7 @@
     "./src/*": "./src/*"
   },
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=9.0.0"
+    "node": "^18.0.0 || >=20.0.0"
   },
   "repository": {
     "type": "git",

package/src/data/main.json

@@ -1,51 +1,36 @@
 {
+  "baseUrl": "https://localhost:5173",
   "lang": "en",
+  "cookieConsent": true,
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
     "https://fonts.googleapis.com"
   ],
+  "preload": [
+    {
+      "href": "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block",
+      "rel": "preload stylesheet",
+      "as": "style",
+      "crossorigin": true
+    }
+  ],
   "assets": {
     "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/styles/main.css"
       ]
     },
     "js": {
       "main": "/src/scripts/main.js"
     }
   },
-  "layout": {
-    "cookies": false,
-    "nav": [
-      {
-        "name": "Home",
-        "url": "/"
-      },
-      {
-        "name": "Documentation",
-        "url": "/ui"
-      },
-      {
-        "name": "Icons",
-        "url": "/ui-icons"
-      }
-    ]
-  },
   "media": {
-    "min-1280": "(min-width: 1280px)",
-    "min-960": "(min-width: 960px)",
-    "min-768": "(min-width: 768px)",
-    "max-400": "(max-width: 767px)",
-    "min-320": "(min-width: 320px)"
-  },
-  "lazy": {
-    "1x1": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
-    "16x9": "data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACwAAAAAEAAJAAACCoSPqcvtD6OclBUAOw==",
-    "5x2": "data:image/gif;base64,R0lGODlhBQACAIAAAP///wAAACwAAAAABQACAAACA4SPBQA7",
-    "4x3": "data:image/gif;base64,R0lGODlhBAADAIAAAP///wAAACwAAAAABAADAAACA4SPVgA7",
-    "8x5": "data:image/gif;base64,R0lGODlhCAAFAIAAAP///wAAACwAAAAACAAFAAACBYSPqctYADs=",
-    "3x2": "data:image/gif;base64,R0lGODlhAwACAIAAAP///wAAACwAAAAAAwACAAACAoRfADs="
+    "min-xl": "(min-width: 1216px)",
+    "max-lg": "(max-width: 959px)",
+    "min-lg": "(min-width: 960px)",
+    "min-md": "(min-width: 744px)",
+    "max-md": "(max-width: 767px)",
+    "min-xs": "(min-width: 360px)"
   }
 }

package/src/data/nav.json

@@ -0,0 +1,12 @@
+{
+  "nav": [
+    {
+      "name": "Home",
+      "url": "/"
+    },
+    {
+      "name": "Gdpr",
+      "url": "/gdpr"
+    }
+  ]
+}

package/src/icons.svg

@@ -1,38 +1,8 @@
 <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" />
-    </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%;" />
-    </svg>
-    <svg id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <symbol id="icon-exclamation-circle" viewBox="0 0 24 24">
         <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" />
-    </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>
+    </symbol>
+    <symbol id="icon-x-mark" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </symbol>
 </svg>

package/src/pages/dialog/basic.json.latte

@@ -0,0 +1,5 @@
+{capture $dialog}
+    {include TEMPLATES_DIR . 'components/dialog/DialogBasic.latte'}
+{/capture}
+
+{$dialog|json('content')|noescape}

package/src/pages/email/index.json

@@ -0,0 +1,12 @@
+{
+  "title": "Email",
+  "template": "./src/templates/emails/layouts/default.latte",
+  "body": [
+    {
+      "src": "emails/components/Header.latte"
+    },
+    {
+      "src": "emails/components/Content.latte"
+    }
+  ]
+}

package/src/pages/gdpr.json

@@ -0,0 +1,11 @@
+{
+  "title": "GDPR",
+  "body": [
+    {
+      "src": "components/Content.latte"
+    },
+    {
+      "src": "components/cookieconsent/CookieConsentContent.latte"
+    }
+  ]
+}

package/src/pages/index.json

@@ -0,0 +1,8 @@
+{
+  "title": "Example",
+  "body": [
+    {
+      "src": "components/Example.latte"
+    }
+  ]
+}

package/src/scripts/components/(ui)/+.js

@@ -0,0 +1,12 @@
+import './Button.js'
+import './Compare.js'
+import './Control.js'
+import './ControlSelect.js'
+import './Details.js'
+import './Dialog.js'
+import './Drawer.js'
+import './Form.js'
+import './Popover.js'
+import './Range.js'
+import './Tabs.js'
+import './Toast.js'

package/src/scripts/components/(ui)/Button.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Button } from 'winduum-stimulus/components/button/index.js'
+
+useStimulus.register('x-button', Button)

package/src/scripts/components/(ui)/Compare.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Compare } from 'winduum-stimulus/components/compare/index.js'
+
+useStimulus.register('x-compare', Compare)

package/src/scripts/components/(ui)/Control.js

@@ -0,0 +1,11 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Control } from 'winduum-stimulus/components/control/index.js'
+import { validateField } from 'winduum/src/components/form/index.js'
+
+useStimulus.register('x-control', class extends Control {
+    connect() {
+        validateField(this.element, { validate: false })
+
+        this.element.addEventListener('change', () => validateField(this.element))
+    }
+})

package/src/scripts/components/(ui)/ControlSelect.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { ControlSelect } from '@newlogic-digital/stimulus-components'
+
+useStimulus.register('x-control-select', ControlSelect)

package/src/scripts/components/(ui)/Details.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Details } from 'winduum-stimulus/components/details/index.js'
+
+useStimulus.register('x-details', Details)

package/src/scripts/components/(ui)/Dialog.js

@@ -0,0 +1,17 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Dialog } from 'winduum-stimulus/components/dialog/index.js'
+
+useStimulus.register('x-dialog', class extends Dialog {
+    connect() {
+        super.connect()
+
+        this.element.addEventListener('x-dialog:show', () => this.appendToaster(this.element))
+        this.element.addEventListener('close', () => this.appendToaster(document.body))
+    }
+
+    appendToaster(parentElement) {
+        const toasterElement = document.querySelector('.x-toaster')
+
+        if (toasterElement) parentElement.appendChild(toasterElement)
+    }
+})

package/src/scripts/components/(ui)/Drawer.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Drawer } from 'winduum-stimulus/components/drawer/index.js'
+
+useStimulus.register('x-drawer', Drawer)

package/src/scripts/components/(ui)/Form.js

@@ -0,0 +1,15 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Form } from 'winduum-stimulus/components/form/index.js'
+import { validateForm } from 'winduum/src/components/form/index.js'
+
+useStimulus.register('x-form', class extends Form {
+    requestSubmit() {
+        this.element.requestSubmit()
+    }
+
+    reset(event) {
+        this.element.reset()
+
+        validateForm(event, { validateOptions: { validate: false } })
+    }
+})

package/src/scripts/components/(ui)/Popover.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Popover } from 'winduum-stimulus/components/popover/index.js'
+
+useStimulus.register('x-popover', Popover)

package/src/scripts/components/(ui)/Range.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Range } from 'winduum-stimulus/components/range/index.js'
+
+useStimulus.register('x-range', Range)

package/src/scripts/components/(ui)/Tabs.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Tabs } from 'winduum-stimulus/components/tabs/index.js'
+
+useStimulus.register('x-tabs', Tabs)

package/src/scripts/components/(ui)/Toast.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Toast } from 'winduum-stimulus/components/toast/index.js'
+
+useStimulus.register('x-toast', Toast)

package/src/scripts/components/+.js

@@ -0,0 +1,5 @@
+import './(ui)/+.js'
+import './App.js'
+import './ReCaptcha.js'
+import './Reveal.js'
+import './cookieconsent/+.js'

package/src/scripts/components/App.js

@@ -0,0 +1,5 @@
+import { Controller, useStimulus } from '../composables/stimulus.js'
+
+useStimulus.register('x-app', class extends Controller {
+    // YOUR GLOBAL METHODS
+})

package/src/scripts/components/ReCaptcha.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../composables/stimulus.js'
+import { ReCaptcha } from '@newlogic-digital/stimulus-components'
+
+useStimulus.register('x-recaptcha', ReCaptcha)

package/src/scripts/components/Reveal.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../composables/stimulus.js'
+import { Reveal } from '@newlogic-digital/stimulus-components'
+
+useStimulus.register('x-reveal', Reveal)

package/src/scripts/components/cookieconsent/+.js

@@ -0,0 +1,2 @@
+import './CookieConsentDialog.js'
+import './CookieConsentForm.js'

package/src/scripts/components/cookieconsent/CookieConsentDialog.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { CookieConsentDialog } from '@newlogic-digital/stimulus-components'
+
+useStimulus.register('x-cookieconsent-dialog', CookieConsentDialog)

package/src/scripts/components/cookieconsent/CookieConsentForm.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { CookieConsentForm } from '@newlogic-digital/stimulus-components'
+
+useStimulus.register('x-cookieconsent-form', CookieConsentForm)

package/src/scripts/composables/+.js

@@ -0,0 +1,3 @@
+import './naja.js'
+import './stimulus.js'
+import './swup.js'

package/src/scripts/composables/naja.js

@@ -0,0 +1,24 @@
+import naja from 'naja'
+import {
+    NajaCoreExtension,
+    NajaInvokeExtension,
+    NajaCheckValidityExtension
+} from '@newlogic-digital/naja-extensions'
+import { initCookieConsent } from '@newlogic-digital/cookieconsent-js'
+import { initStimulus } from './stimulus.js'
+import { useSwup } from './swup.js'
+
+naja.registerExtension(NajaCoreExtension())
+naja.registerExtension(NajaInvokeExtension())
+naja.registerExtension(NajaCheckValidityExtension())
+
+naja.snippetHandler.addEventListener('afterUpdate', ({ detail }) => {
+    initStimulus(detail.snippet)
+    initCookieConsent(detail.snippet)
+
+    useSwup.cache.clear()
+})
+
+naja.initialize({
+    history: 'replace'
+})

package/src/scripts/composables/stimulus.js

@@ -0,0 +1,31 @@
+import { Application, Controller } from '@hotwired/stimulus'
+import { InvokeFetch } from 'winduum-stimulus/utilities/invoke/index.js'
+import stimulus from 'winduum-stimulus'
+import { initAfter } from '../utils/+.js'
+
+const initConfig = {
+    controllers: ['x-button', 'x-control', 'x-text', 'x-check', 'x-dialog'],
+    actions: [
+        ['.x-button', 'click->x-button#ripple'],
+        ['.x-check', 'change->x-form#validateField'],
+        ['.x-switch', 'change->x-form#validateField'],
+        ['[data-invoke-action]:not([data-naja], [data-action*="invoke#action"])', 'invoke#action']
+    ]
+}
+
+const useStimulus = new Application(document.documentElement)
+
+const useController = (controller, target, application = useStimulus) =>
+    stimulus.useController(controller, target, application)
+
+const initStimulus = (element, { controllers, actions } = initConfig) =>
+    stimulus.initStimulus(element, { controllers, actions })
+
+useStimulus.start().then(() => initStimulus(document.body))
+useStimulus.register('invoke', class extends InvokeFetch {
+    onFetchComplete(element) {
+        initAfter(element)
+    }
+})
+
+export { useStimulus, useController, Controller, initStimulus, initConfig }

package/src/scripts/composables/swup.js

@@ -0,0 +1,23 @@
+import Swup from 'swup'
+import { SwupCorePlugin } from '@newlogic-digital/swup-plugins'
+import initAfter from '../utils/initAfter.js'
+import { useController } from 'winduum-stimulus'
+
+const useSwup = new Swup({
+    containers: ['.x-main', '.x-header', '.x-toaster'],
+    plugins: [new SwupCorePlugin()]
+})
+
+useSwup.hooks.on('animation:out:start', async () => {
+    useController('x-drawer', '.x-drawer').invoke('close')
+    useController('x-dialog', '.x-dialog').invoke('close')
+    useController('x-popover', '.x-popover:has([data-open])').invoke('hide')
+})
+
+useSwup.hooks.on('content:replace', () => {
+    useSwup.options.containers.forEach((selector) => {
+        initAfter(document.querySelector(selector))
+    })
+})
+
+export { useSwup }

package/src/scripts/main.js

@@ -1,6 +1,4 @@
-import './Utils/global.js'
-import './Libraries/+.js'
-import './Layout/+.js'
-import './Sections/+.js'
-import './Components/+.js'
-import './Ui/+.js'
+import './composables/stimulus.js'
+import './composables/swup.js'
+import './components/+.js'
+import.meta.glob('/src/assets/**')

package/src/scripts/utils/+.js

@@ -0,0 +1 @@
+export { default as initAfter } from './initAfter.js'

package/src/scripts/utils/initAfter.js

@@ -0,0 +1,11 @@
+import { replaceScripts } from '@newlogic-digital/utils-js'
+import { initCookieConsent } from '@newlogic-digital/cookieconsent-js'
+import { initStimulus } from '../composables/stimulus.js'
+import { initNaja } from '@newlogic-digital/naja-extensions'
+
+export default function initAfter(element) {
+    initStimulus(element)
+    initNaja(element)
+    replaceScripts(element)
+    initCookieConsent(element)
+}

package/src/styles/base/+.css

@@ -0,0 +1,4 @@
+@import "./breakpoints.css";
+@import "./defaults.css";
+@import "./keyframes.css";
+@import "./transitions.css";