@newlogic-digital/ui 3.0.4 → 3.1.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,7 +18,9 @@ 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
@@ -32,7 +32,7 @@ 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 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
 
@@ -56,7 +56,6 @@ $ npm i @newlogic-newlogic/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"
 ```
 
@@ -75,10 +74,7 @@ import "node_modules/@newlogic/ui/src/scripts/main.js"
 Each Newlogic Core project has to have config via `gulpfile.js`, docs - [core.newlogic.cz](https://core.newlogic.cz/)
 
 ## 📌 Future plans
-- finishing docs and translating it to english
-- lighthouse optimization
-- upgrading form elements
-- new elements - dropdown, notificaton, snack and more
+- performance optimization
 
 ## Licence
 GNU GPLv3

package/gulpfile.js

@@ -1,192 +1,41 @@
-import {defineConfig} from "@newlogic-digital/core";
-import postcssMixins from "postcss-mixins";
+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"]
+            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Utils/Functions', 'Ui']
         },
         importMap: {
-            build: true,
+            build: false,
             trailingSlashes: /(vanillajs-datepicker)/
         }
     },
     styles: {
         purge: {
-            content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'temp/cdn/*.js'],
+            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-wsw|wsw|datepicker)/]
+                    deep: [/(ui-text|wsw|datepicker)/]
                 }
             }
         },
         vendor: {
-            path: "Utils/vendor.css"
+            path: 'Utils/vendor.css'
         },
         importResolution: {
-            directories: ["Components", "Sections", "Layout", "Libraries", "Ui"]
+            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Ui']
         },
-        themePath: "Utils/theme/{THEME}.{FORMAT}",
+        themePath: 'Utils/theme/{THEME}.{FORMAT}',
         postcss: {
-            extend: [postcssMixins]
+            extend: []
         }
-    },
-    tailwind: {
-        darkMode: "class", // or "media" or "class"
-        corePlugins: {
-            preflight: false,
-            container: false,
-            ringWidth: false,
-            ringColor: false,
-            ringOpacity: false,
-            ringOffsetWidth: false,
-            ringOffsetColor: false,
-            gradientColorStops: false,
-            backgroundImage: false,
-            boxShadow: false
-        },
-        theme: {
-            extend: {
-                colors: {
-                    background: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-background), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-background), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-background))`
-                    },
-                    default: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-default), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-default), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-default))`
-                    },
-                    invert: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-invert), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-invert), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-invert))`
-                    },
-                    light: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-light), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-light), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-light))`
-                    },
-                    dark: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-dark), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-dark), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-dark))`
-                    },
-                    primary: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-primary), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-primary))`
-                    },
-                    secondary: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-secondary), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-secondary), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-secondary))`
-                    },
-                    warning: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-warning), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-warning), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-warning))`
-                    },
-                    error: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-error), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-error), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-error))`
-                    },
-                    info: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-info), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-info), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-info))`
-                    },
-                    success: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-success), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-success), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-success))`
-                    }
-                }
-            },
-            fontFamily: {
-                primary: "var(--font-primary)",
-                secondary: "var(--font-secondary)"
-            },
-            fontWeight: {
-                light: "var(--weight-light)",
-                normal: "var(--weight-normal)",
-                medium: "var(--weight-medium)",
-                semibold: "var(--weight-semibold)",
-                bold: "var(--weight-bold)",
-                extrabold: "var(--weight-extrabold)"
-            },
-            zIndex: {
-                "0": 0,
-                "10": "var(--z-10)",
-                "20": "var(--z-20)",
-                "30": "var(--z-30)",
-                "40": "var(--z-40)",
-                "50": "var(--z-50)",
-                "auto": "auto"
-            },
-            screens: {
-                "m": {"max": "47.9375em"},
-                "t": "48em",
-                "d": "60em",
-                "w": "76em",
-                "hd": "88em",
-                "touch": {"max": "59.9375em"},
-            }
-        },
-        variants: {
-            extend: {
-                backgroundColor: ['checked'],
-                borderColor: ['checked'],
-                textColor: ['checked'],
-            }
-        },
-        plugins: [],
     }
-})
+})

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "type": "module",
   "main": "gulpfile.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",
+  "scripts": {
+    "utils:eslint": "eslint 'src/scripts/**/*.js' --fix",
+    "utils:stylelint": "stylelint 'src/styles/**/*.css' --fix"
+  },
   "imports": {},
   "dependencies": {
-    "@simonwep/pickr": "^1.8.0",
-    "cleave.js": "^1.6.0",
-    "stimulus": "2.0.0",
+    "@simonwep/pickr": "^1.8.2",
+    "@hotwired/stimulus": "3.0.1",
     "swup": "2.0.14",
-    "vanillajs-datepicker": "^1.1.4"
+    "tippy.js": "^6.3.7",
+    "vanillajs-datepicker": "^1.2.0"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "~0.5.11",
-    "postcss-mixins": "^7.0.3"
+    "@newlogic-digital/core": "~0.9.5",
+    "eslint-config-standard": "^16.0.3",
+    "stylelint-config-standard": "^24.0.0"
   },
   "files": [
     "src",

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") }}
+            {{ fetch ('/temp/emails/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/main.json

@@ -8,27 +8,29 @@
     "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/scripts/Components/+.js

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

package/src/scripts/Components/CookieConsent.js

@@ -1,80 +1,82 @@
-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 (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.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._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'])
+        })
+    }
+
+    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 = localStorage.getItem('lib-cookieconsent')
+
+        document.querySelector('.c-cookieconsent').classList.remove('is-animate')
+        document.querySelector('.c-cookieconsent')._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()
 
-            let value = (new FormData(e.target)).get("cookies");
+            const type = []
 
-            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());
-            }
+            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+                input.checked && type.push(input.value)
+            })
+
+            LibCookieConsent.set(type)
+            location.reload()
         })
     }
-});
+
+    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')
+        }
+    }
+})

package/src/scripts/Components/Form.js

@@ -1,26 +1,33 @@
-import {LibStimulus, Controller} from "../Libraries/Stimulus.js";
+import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
 
-LibStimulus.register("c-form", class extends Controller {
-    connect() {
-        let element = this.element;
+LibStimulus.register('c-form', class extends Controller {
+    validate(element, e) {
+        if (element.reportValidity() === false) {
+            e.preventDefault()
+            e.stopPropagation()
+        }
 
-        if (typeof HTMLFormElement.prototype.reportValidity !== "undefined") {
-            element.setAttribute("novalidate","");
-            element.addEventListener('submit', (event) => {
-                if (element.reportValidity() === false) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
+        element.querySelectorAll('.ui-input').forEach(element => {
+            getController(element, 'ui-input').validate(element, true)
+        })
 
-                [...element.querySelectorAll(".ui-input")].map((element) => {
-                    console.log(element);
-                    LibStimulus.getController(element, "ui-input").validateInput(element, true)
-                });
+        element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
+            getController(select.parentNode, 'ui-select').validate(select.parentNode, select)
+        })
 
-                [...element.querySelectorAll(`.ui-select:not([data-state*="active"]) select[required]`)].map((element) => {
-                    element.parentNode._addDataValue("state", "invalid");
-                });
-            }, false);
-        }
+        element.querySelectorAll('[data-controller="ui-checkbox"] input:not([type="hidden"])').forEach(input => {
+            input.parentNode._removeDataValue('state', 'valid invalid')
+
+            if (input.checkValidity()) {
+                input.parentNode._addDataValue('state', 'valid')
+            } else {
+                input.parentNode._addDataValue('state', 'invalid')
+            }
+        })
+    }
+
+    connect() {
+        this.element.setAttribute('novalidate', '')
+        this.element.addEventListener('submit', e => this.validate(this.element, e))
     }
-});
+})

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)
+        }
+    }
+})