@newlogic-digital/ui 4.2.0 → 4.3.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "4.2.0",
+  "version": "4.3.0-next.1",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
@@ -15,35 +15,37 @@
     "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",
-    "npm-update": "ncu -u && npm update",
-    "npm-sort": "npm r -S example && npm r -D example"
+    "eslint": "eslint",
+    "eslint-fix": "eslint --fix",
+    "stylelint": "stylelint 'src/**/*.css'",
+    "stylelint-fix": "stylelint 'src/**/*.css' --fix",
+    "lint": "npm run eslint && npm run stylelint"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.0",
+    "@floating-ui/dom": "^1.7.6",
     "@hotwired/stimulus": "^3.2.2",
-    "@newlogic-digital/cookieconsent-js": "^1.0.0",
+    "@newlogic-digital/cookieconsent-js": "^1.1.1",
     "@newlogic-digital/naja-extensions": "^1.0.3",
-    "@newlogic-digital/stimulus-components": "^1.1.0",
+    "@newlogic-digital/stimulus-components": "^1.2.0",
     "@newlogic-digital/swup-plugins": "^1.0.0",
-    "@newlogic-digital/utils-js": "^1.1.4",
-    "naja": "^3.2.1",
+    "@newlogic-digital/utils-js": "^1.2.0",
+    "@tailwindcss/vite": "^4.2.1",
+    "naja": "^3.3.3",
     "slide-element": "^2.3.1",
-    "swup": "^4.8.2",
-    "winduum": "^2.2.1",
-    "winduum-stimulus": "^2.0.11"
+    "swup": "^4.8.3",
+    "winduum": "^2.2.17",
+    "winduum-stimulus": "^2.0.12"
   },
   "devDependencies": {
-    "@eslint/js": "^9.26.0",
-    "@newlogic-digital/core": "^3.1.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
-    "@stylistic/stylelint-config": "^2.0.0",
-    "eslint": "^9.26.0",
-    "npm-check-updates": "^18.0.1",
-    "stylelint-config-standard": "^38.0.0"
+    "@eslint/js": "^10.0.1",
+    "@newlogic-digital/core": "^4.0.0-next.16",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@stylistic/stylelint-config": "^4.0.0",
+    "eslint": "^10.0.3",
+    "globals": "^17.4.0",
+    "npm-check-updates": "^19.6.3",
+    "stylelint-config-standard": "^40.0.0",
+    "vite": "^8.0.0-beta.13"
   },
   "browserslist": [
     "> 1%",

package/src/+.css

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

package/src/data/main.json

@@ -2,6 +2,16 @@
   "baseUrl": "https://localhost:5173",
   "lang": "en",
   "cookieConsent": true,
+  "head": [
+    {
+      "src": "components/header/Header.latte"
+    }
+  ],
+  "foot": [
+    {
+      "src": "components/footer/Footer.latte"
+    }
+  ],
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
@@ -9,8 +19,8 @@
   ],
   "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",
+      "href": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=block",
+      "rel": "preload",
       "as": "style",
       "crossorigin": true
     }
@@ -18,7 +28,8 @@
   "assets": {
     "css": {
       "all": [
-        "/src/styles/main.css"
+        "/src/styles/main.css",
+        "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=block"
       ]
     },
     "js": {
@@ -26,11 +37,10 @@
     }
   },
   "media": {
-    "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)"
+    "xl": "1216px",
+    "lg": "960px",
+    "md": "744px",
+    "sm": "416px",
+    "xs": "360px"
   }
 }

package/src/data/socials.json

@@ -0,0 +1,24 @@
+{
+  "socials": [
+    {
+      "name": "Instagram",
+      "url": "https://instagram.com",
+      "icon": "#simpleicons-solid/instagram"
+    },
+    {
+      "name": "LinkedIn",
+      "url": "https://LinkedIn.com",
+      "icon": "#simpleicons-solid/linkedin"
+    },
+    {
+      "name": "X",
+      "url": "https://x.com",
+      "icon": "#simpleicons-solid/x"
+    },
+    {
+      "name": "Facebook",
+      "url": "https://facebook.com",
+      "icon": "#simpleicons-solid/facebook"
+    }
+  ]
+}

package/src/icons/simpleicons/apple.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
+</svg>

package/src/icons/simpleicons/facebook.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
+</svg>

package/src/icons/simpleicons/google.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
+</svg>

package/src/icons/simpleicons/instagram.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/>
+</svg>

package/src/icons/simpleicons/linkedin.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

package/src/icons/simpleicons/messenger.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.96.96 0 0 1 .323.683l.065 2.135a.96.96 0 0 0 1.347.85l2.381-1.053a.96.96 0 0 1 .641-.046A13 13 0 0 0 12 23.28c6.76 0 12-4.952 12-11.64S18.76 0 12 0m6.806 7.44c.522-.03.971.567.63 1.094l-4.178 6.457a.707.707 0 0 1-.977.208l-3.87-2.504a.44.44 0 0 0-.49.007l-4.363 3.01c-.637.438-1.415-.317-.995-.966l4.179-6.457a.706.706 0 0 1 .977-.21l3.87 2.505c.15.097.344.094.491-.007l4.362-3.008a.7.7 0 0 1 .364-.13"/>
+</svg>

package/src/icons/simpleicons/threads.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/>
+</svg>

package/src/icons/simpleicons/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
+</svg>

package/src/icons/simpleicons/x.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/>
+</svg>

package/src/icons/simpleicons/youtube.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+</svg>

package/src/icons/solid/newlogic-logomark.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.8075 0L12.5356 5.27199L7.2635 0L0 0L0 24H6.19233L11.4642 18.7277L16.7363 24H24L24 0L17.8075 0ZM17.8075 1.70562V10.544L13.3884 6.12467L17.8075 1.70562ZM19.0137 13.4561L19.0137 1.20651L22.7936 1.20651L22.7936 21.9413L2.05922 1.20651L6.76427 1.20651L19.0137 13.4561ZM6.19233 22.2945L6.19233 13.4561L10.6114 17.875L6.19233 22.2945ZM4.98611 10.544L4.98611 22.7938H1.20621L1.20621 2.05895L21.9411 22.7938H17.2359L4.98611 10.544Z"/>
+</svg>

package/src/icons/solid/newlogic-logotype.svg

@@ -0,0 +1,11 @@
+<svg role="img" viewBox="0 0 120 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.2163 18.8114H13.2394L3.5514 7.57133V18.8114H0V1.29779H2.97691L12.6649 12.8516V1.29779H16.2163V18.8114Z"/>
+    <path d="M31.7841 13.2819H21.6544C22.001 15.2242 23.3605 16.4111 24.9865 16.4111C26.0262 16.4111 27.3324 16.2762 28.292 14.6307L31.4375 15.3051C30.2646 18.1106 27.8921 19.4594 24.9865 19.4594C21.2279 19.4594 18.1624 16.573 18.1624 12.3377C18.1624 8.10248 21.2279 5.18906 25.0399 5.18906C28.5852 5.18906 31.6508 7.9676 31.7841 12.068V13.2819ZM21.761 10.7731H28.1854C27.7322 9.04665 26.4527 8.29132 25.0399 8.29132C23.707 8.29132 22.1876 9.1006 21.761 10.7731Z"/>
+    <path d="M48.049 18.8108H44.8286L42.1765 11.1827L39.4973 18.8108H36.2768L31.7845 5.83778H35.3297L38.0088 13.8032L40.7692 5.83778H43.5566L46.317 13.8292L48.9962 5.83778H52.5414L48.049 18.8108Z"/>
+    <path d="M53.8381 18.8109V0H57.0814V18.8109H53.8381Z"/>
+    <path d="M73.2976 12.3242C73.2976 16.5999 70.0531 19.4594 66.202 19.4594C62.3508 19.4594 59.0272 16.5999 59.0272 12.3242C59.0272 8.04858 62.2717 5.18906 66.202 5.18906C70.1323 5.18906 73.2976 8.04858 73.2976 12.3242ZM69.9212 12.3242C69.9212 9.79153 68.022 8.26645 66.202 8.26645C64.3819 8.26645 62.4036 9.79153 62.4036 12.3242C62.4036 14.857 64.3028 16.382 66.202 16.382C68.1012 16.382 69.9212 14.857 69.9212 12.3242Z"/>
+    <path d="M88.2174 17.6406C88.2174 21.7288 85.4775 24 81.316 24C78.3177 24 76.1465 22.9045 75.0351 21.0608L77.8008 18.8965C78.8088 20.2057 79.6359 20.8203 81.316 20.8203C83.4872 20.8203 84.9089 19.4309 84.9089 17.1062V16.8925C83.9525 17.6941 82.6343 18.1216 80.8508 18.1216C77.6198 18.1216 74.5956 15.2893 74.5956 11.6286C74.5956 7.96795 77.6198 5.18906 80.8508 5.18906C82.6343 5.18906 83.9525 5.6433 84.9089 6.41819V5.58986H88.1915L88.2174 17.6406ZM84.9089 11.6286C84.9089 9.54444 83.2546 8.15499 81.4453 8.15499C79.4033 8.15499 77.8783 9.54444 77.8783 11.6286C77.8783 13.7128 79.4033 15.1022 81.4453 15.1022C83.2546 15.1022 84.9089 13.7128 84.9089 11.6286Z"/>
+    <path d="M94.7036 2.0441C94.7036 3.18259 93.8765 4.03646 92.7576 4.03646C91.6387 4.03646 90.8116 3.18259 90.8116 2.0441C90.8116 0.905616 91.6144 0 92.7576 0C93.9009 0 94.7036 0.957366 94.7036 2.0441ZM91.1522 18.8109V5.89944H94.363V18.8109H91.1522Z"/>
+    <path d="M107.057 13.5786L110.271 14.4149C109.533 17.4902 106.82 19.4594 103.684 19.4594C99.8376 19.4594 96.6495 16.573 96.6495 12.3377C96.6495 8.10248 99.8376 5.18906 103.684 5.18906C106.741 5.18906 109.402 7.13134 110.271 10.1527L106.925 11.1238C106.451 9.23548 105.212 8.45317 103.684 8.45317C101.497 8.45317 100.022 10.0448 100.022 12.3377C100.022 14.6307 101.497 16.1953 103.684 16.1953C105.212 16.1953 106.451 15.44 107.057 13.5786Z"/>
+    <path d="M120.001 16.2247C120.001 18.1011 118.541 19.4599 116.757 19.4599C114.974 19.4599 113.514 18.1011 113.514 16.2247C113.514 14.3483 114.974 12.9734 116.757 12.9734C118.541 12.9734 120.001 14.3321 120.001 16.2247ZM119.303 16.2247C119.303 14.7365 118.168 13.6366 116.757 13.6366C115.347 13.6366 114.228 14.7365 114.228 16.2247C114.228 17.7129 115.379 18.7805 116.757 18.7805C118.136 18.7805 119.303 17.6805 119.303 16.2247ZM117.503 16.6129L118.33 17.5997H117.455L116.709 16.6938H116.303V17.5997H115.557V14.6557H116.984C117.73 14.6557 118.184 15.06 118.184 15.6424C118.184 16.0953 117.925 16.4512 117.503 16.6129ZM116.968 16.063C117.276 16.063 117.471 15.9012 117.471 15.6586C117.471 15.4321 117.276 15.2865 116.968 15.2865H116.303V16.063H116.968Z"/>
+</svg>

package/src/pages/example/control-select.json

@@ -0,0 +1,8 @@
+{
+  "title": "Example Popover Autocomplete",
+  "body": [
+    {
+      "src": "components/(example)/ControlSelect.latte"
+    }
+  ]
+}

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

@@ -7,6 +7,7 @@ import './Details.js'
 import './Dialog.js'
 import './Drawer.js'
 import './Form.js'
+import './Image.js'
 import './Popover.js'
 import './Range.js'
 import './Tabs.js'

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

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

package/src/scripts/composables/stimulus.js

@@ -4,7 +4,7 @@ import stimulus from 'winduum-stimulus'
 import { initAfter } from '../utils/+.js'
 
 const initConfig = {
-  controllers: ['x-button', 'x-control', 'x-text', 'x-check', 'x-dialog'],
+  controllers: ['x-button', 'x-control', 'x-text', 'x-check', 'x-dialog', 'x-image'],
   actions: [
     ['.x-button', 'click->x-button#ripple'],
     ['.x-check', 'change->x-form#validateField'],

package/src/styles/base/defaults.css

@@ -1,17 +1,15 @@
 @import "winduum/src/base/defaults.css";
-@import "winduum/tailwindcss/base/defaults.css";
 
 :where(svg) {
   display: block;
 
-  &:has([href]) {
+  &:has([href*="-outline"]) {
     stroke-width: 1.5;
     stroke: currentcolor;
     fill: none;
   }
 
-  &:has([href*="-solid"]) {
-    stroke: none;
+  &:has([href*="-solid"], [href*="-mini"], [href*="-micro"]) {
     fill: currentcolor;
   }
 }

package/src/styles/components/(ui)/+.css

@@ -13,6 +13,7 @@
 @import "./Info.css";
 @import "./Label.css";
 @import "./Link.css";
+@import "./Marquee.css";
 @import "./Notice.css";
 @import "./Popover.css";
 @import "./Progress.css";

package/src/styles/components/(ui)/Button.css

@@ -1,8 +1,6 @@
 @import "winduum/src/components/button/props/default.css" layer(theme);
 @import "winduum/src/components/button/props/interactive.css" layer(theme);
 @import "winduum/src/components/button/default.css" layer(utilities);
-@import "winduum/src/components/button/lg.css" layer(utilities);
-@import "winduum/src/components/button/sm.css" layer(utilities);
 @import "winduum/src/components/button/interactive.css" layer(utilities);
 @import "winduum/src/components/button/bordered.css" layer(utilities);
 @import "winduum/src/components/button/ghosted.css" layer(utilities);
@@ -10,3 +8,17 @@
 @import "winduum/src/components/button/square.css" layer(utilities);
 @import "winduum/src/components/button/circle.css" layer(utilities);
 @import "winduum/src/components/button/spinner.css" layer(utilities);
+
+@utility lg {
+  .x-button:is(&) {
+    --x-button-block-size: 3rem;
+    --x-button-padding-inline: 1.5rem;
+  }
+}
+
+@utility sm {
+  .x-button:is(&) {
+    --x-button-block-size: 2rem;
+    --x-button-padding-inline: 1rem;
+  }
+}

package/src/styles/components/(ui)/Check.css

@@ -2,3 +2,10 @@
 @import "winduum/src/components/check/default.css" layer(utilities);
 @import "winduum/src/components/check/interactive.css" layer(utilities);
 @import "winduum/src/components/check/invalid.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-check-line-height: var(--x-check-size);
+  }
+}

package/src/styles/components/(ui)/Control.css

@@ -1,11 +1,13 @@
 @import "winduum/src/components/control/props/default.css" layer(theme);
 @import "winduum/src/components/control/props/floating.css" layer(theme);
 @import "winduum/src/components/control/props/select.css" layer(theme);
+@import "winduum/src/components/control/props/select-picker.css" layer(theme);
 @import "winduum/src/components/control/props/icon.css" layer(theme);
 @import "winduum/src/components/control/default.css" layer(utilities);
 @import "winduum/src/components/control/interactive.css" layer(utilities);
 @import "winduum/src/components/control/file.css" layer(utilities);
 @import "winduum/src/components/control/select.css" layer(utilities);
+@import "winduum/src/components/control/select-picker.css" layer(utilities);
 @import "winduum/src/components/control/icon.css" layer(utilities);
 @import "winduum/src/components/control/floating.css" layer(utilities);
 @import "winduum/src/components/control/invalid.css" layer(utilities);

package/src/styles/components/(ui)/ControlSelect.css

@@ -1 +1,8 @@
 @import "@newlogic-digital/stimulus-components/src/control-select/index.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-control-select-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" /></svg>');
+  }
+}

package/src/styles/components/(ui)/Heading.css

@@ -1,14 +1,35 @@
 @import "winduum/src/components/heading/props/default.css" layer(theme);
 @import "winduum/src/components/heading/default.css" layer(utilities);
 
+@layer theme {
+  :root,
+  :host {
+    --x-heading-font-size: var(--text-4xl);
+    --x-heading-font-weight: var(--font-weight-medium);
+    --x-heading-line-height: 1.2;
+  }
+}
+
+@utility xs {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-2xl);
+  }
+}
+
 @utility sm {
   .x-heading:is(&) {
-    --x-heading-font-size: var(--text-lg);
+    --x-heading-font-size: var(--text-3xl);
   }
 }
 
 @utility lg {
   .x-heading:is(&) {
-    --x-heading-font-size: var(--text-3xl);
+    --x-heading-font-size: var(--text-5xl);
+  }
+}
+
+@utility xl {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-6xl);
   }
 }

package/src/styles/components/(ui)/Label.css

@@ -1,2 +1,11 @@
 @import "winduum/src/components/label/props/default.css" layer(theme);
 @import "winduum/src/components/label/default.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-label-font-size: var(--text-2xs);
+    --x-label-line-height: calc(1em + 0.125rem);
+    --x-label-font-weight: var(--font-weight-medium);
+  }
+}

package/src/styles/components/(ui)/Marquee.css

@@ -0,0 +1,2 @@
+@import "winduum/src/components/marquee/default.css" layer(utilities);
+@import "winduum/src/components/marquee/keyframes/default.css";

package/src/styles/components/(ui)/Text.css

@@ -1,2 +1,51 @@
-@import "winduum/src/components/text/props/default.css" layer(theme);
 @import "winduum/src/components/text/default.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-text-font-size: var(--text-base);
+    --x-text-line-height: 1.5;
+    --x-text-letter-spacing: -0.02em;
+    --x-text-content-bold: var(--font-weight-semibold);
+    --x-text-content-margin-block: calc(var(--spacing) * 4);
+    --x-text-heading-font-weight: var(--font-weight-medium);
+    --x-text-heading-line-height: 1.2;
+    --x-text-heading-margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
+    --x-text-heading-1-font-size: var(--text-5xl);
+    --x-text-heading-2-font-size: var(--text-4xl);
+    --x-text-heading-3-font-size: var(--text-3xl);
+    --x-text-heading-4-font-size: var(--text-2xl);
+    --x-text-heading-5-font-size: var(--text-xl);
+    --x-text-heading-6-font-size: var(--text-lg);
+    --x-text-list-marker-size: 0.375em;
+    --x-text-hr-margin-block: 3em;
+    --x-text-blockquote-font-size: var(--text-lg);
+    --x-text-blockquote-margin-block: calc(var(--spacing) * 9);
+    --x-text-blockquote-border-inline-start-width: 0.125rem;
+    --x-text-blockquote-border-inline-start-color: var(--color-main);
+    --x-text-figure-margin-block: calc(var(--spacing) * 12);
+    --x-text-img-border-radius: var(--radius-2xl);
+    --x-text-figcaption-font-weight: var(--font-weight-normal);
+    --x-text-figcaption-margin-block-start: 0.5rem;
+    --x-text-figcaption-padding-inline-start: 0.5rem;
+    --x-text-figcaption-border-inline-start: 0.125rem solid var(--color-accent);
+  }
+}
+
+@utility lg {
+  .x-text:is(&) {
+    --x-text-font-size: var(--text-lg);
+  }
+}
+
+@utility sm {
+  .x-text:is(&) {
+    --x-text-font-size: var(--text-sm);
+  }
+}
+
+@utility xs {
+  .x-text:is(&) {
+    --x-text-font-size: var(--text-xs);
+  }
+}

package/src/styles/components/+.css

@@ -1,3 +1,2 @@
 @import "./(layout)/+.css";
 @import "./(ui)/+.css";
-@import "./cookieconsent/+.css";

package/src/styles/emails/theme/config.css

@@ -10,7 +10,9 @@
     "Apple Color Emoji",
     "Segoe UI Emoji",
     "Segoe UI Symbol";
-  --spacing-container: 24px;
+  --spacing-container: 20px;
   --radius: 12px;
   --container: 600px;
 }
+
+@custom-media --media-container (width < 640px);

package/src/styles/emails/utils/common.css

@@ -2,7 +2,7 @@
   min-width: var(--container);
   width: var(--container);
 
-  @media (max-width: 647px) {
+  @media (--media-container) {
     min-width: 100% !important;
     width: 100% !important;
   }

package/src/styles/main.css

@@ -5,7 +5,7 @@
 @import "./base/defaults.css" layer(base);
 @import "./components/+.css";
 @import "./utils/+.css";
-@import "tailwindcss/utilities" layer(utilities);
+@import "tailwindcss/utilities" layer(utilities) source("../");
 @import "winduum/tailwindcss/variants/dark.css";
 @import "./base/breakpoints.css";
 @import "./base/keyframes.css";

package/src/styles/theme/main.css

@@ -1,30 +1,30 @@
 @import "./dark.css";
 
 @theme {
-  --default-font-family: "Poppins", sans-serif;
+  --default-font-family: "Inter", sans-serif;
   --default-color-space: srgb;
   --default-color-scheme: inherit;
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
-  --color-primary: #83cd4f;
-  --color-primary-foreground: var(--color-dark);
-  --color-main: #111315;
+  --color-primary: #076cff;
+  --color-primary-foreground: var(--color-light);
+  --color-main: #181818;
   --color-main-foreground: var(--color-body);
   --color-main-primary: var(--color-main);
-  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 80%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 49%, var(--color-main-foreground));
   --color-body: #fff;
   --color-body-foreground: var(--color-main);
   --color-body-primary: var(--color-body);
-  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 82%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 93%, var(--color-body-foreground));
   --color-light: #fff;
   --color-light-foreground: var(--color-dark);
-  --color-dark: #111315;
+  --color-dark: #181818;
   --color-dark-foreground: var(--color-light);
-  --color-success: #16a34a;
-  --color-error: #dc2626;
-  --color-warning: #eab308;
-  --color-info: #0ea5e9;
+  --color-success: #00c951;
+  --color-error: #e7000b;
+  --color-warning: #fcc800;
+  --color-info: #00bcff;
   --container-width: 80rem;
 }

package/src/styles/tinymce.css

@@ -1,2 +1,3 @@
 @import "./theme/main.css";
 @import "./components/(ui)/Text.css";
+@import "tailwindcss/theme.css";

package/src/styles/utils/index.css

@@ -3,3 +3,25 @@
 @import "winduum/src/utilities/skeleton/props/default.css" layer(theme);
 @import "winduum/src/utilities/spinner/keyframes/ring.css";
 @import "winduum/tailwindcss/utilities/index.css";
+
+@layer theme {
+  :root,
+  :host {
+    --container-width: 82rem;
+    --container-padding: 1.25rem;
+  }
+
+  @media (--media-md) {
+    :root,
+    :host {
+      --container-padding: 2rem;
+    }
+  }
+
+  @media (--media-lg) {
+    :root,
+    :host {
+      --container-padding: 4rem;
+    }
+  }
+}

package/src/templates/components/(example)/ControlSelect.latte

@@ -0,0 +1,26 @@
+<div class="x-control w-full max-w-80 mx-auto" tabindex="-1" data-controller="x-control-select">
+    <select>
+        <option value="0">Doporučujeme</option>
+        <option value="1">Nejprodávanější</option>
+        <option value="2">Od nejlevnějšího</option>
+        <option value="3">Od nejdražšího</option>
+        <option value="4">Nejnovější</option>
+    </select>
+    <div aria-hidden="true" class="max-h-80">
+        <div data-option="0" tabindex="0" data-active>Doporučujeme</div>
+        <div data-option="1" tabindex="0">Nejprodávanější</div>
+        <div data-option="2" tabindex="0">Od nejlevnějšího</div>
+        <div data-option="3" tabindex="0">Od nejdražšího</div>
+        <div data-option="4" tabindex="0">Nejnovější</div>
+    </div>
+</div>
+<div><br></div>
+<div class="x-control w-full max-w-80 mx-auto">
+    <select>
+        <option value="0">Doporučujeme</option>
+        <option value="1">Nejprodávanější</option>
+        <option value="2">Od nejlevnějšího</option>
+        <option value="3">Od nejdražšího</option>
+        <option value="4">Nejnovější</option>
+    </select>
+</div>

package/src/templates/components/(ui)/Pagination.latte

@@ -0,0 +1,19 @@
+<nav n:class="'x-pagination flex gap-2', $classAttribute ?? ''" aria-label="{_'Stránkování'}">
+    <a
+        n:attr="href: $iterator->counter !== 4 ? '#'"
+        n:class="
+            'x-button square sm',
+            $iterator->first ? 'pointer-events-none' : 'muted'
+        "
+        n:foreach="range(1,5) as $item"
+        aria-current={$iterator->first ? 'page' : null}
+    >
+        {if $iterator->last}
+            8
+        {elseif $iterator->counter === 4}
+            ...
+        {else}
+            {$iterator->counter}
+        {/if}
+    </a>
+</nav>

package/src/templates/components/Example.latte

@@ -2,7 +2,6 @@
     <div class="p-4 bg-body-secondary rounded w-full max-w-xl mx-auto">
         <h1 class="x-heading lg mb-4">Hello world!</h1>
         <div class="x-text mb-4">Want to dig deeper into Newlogic UI?</div>
-
         <a href="https://ui.newlogic.cz/" class="x-link underline">Read the docs &rarr;</a>
     </div>
     <div class="flex justify-center mt-4">

package/src/templates/components/cookieconsent/CookieConsentDialog.latte

@@ -1,26 +1,17 @@
-{var $center = true}
-
-<dialog class="x-cookieconsent-dialog x-dialog {if $center}center{/if}" data-controller="x-cookieconsent-dialog">
-    <div class="x-dialog-content">
-        <div class="mt-2 mb-4 md:mb-6">
-            {if true}
-                <div class="x-image w-40 my-4">
-                    <img src="{placeholder(160, 46)}" alt="">
-                </div>
-            {/if}
-            <div class="x-heading text-3xl md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
-        </div>
-        <div class="x-text">
+<dialog class="x-cookieconsent-dialog x-dialog" data-controller="x-cookieconsent-dialog">
+    <div class="x-dialog-content max-w-md text-center p-6 lg:p-8">
+        <div class="x-heading max-md:text-2xl text-3xl mt-2 mb-6 md:mb-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
+        <div class="x-text max-md:text-sm">
             <p>Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory&nbsp;cookies.</p>
             <p>Následující volbou souhlasíte s našimi <a href="/gdpr">zásady&nbsp;ochrany osobních údajů a cookies</a>. Svá&nbsp;nastavení můžete kdykoli změnit.</p>
         </div>
-        <div class="flex items-center mt-6 md:mt-8 gap-4 {if $center}flex-col{else}max-md:flex-col{/if} px-4">
+        <div class="flex items-center mt-8 md:mt-10 gap-4 flex-col">
             <div class="flex flex-col w-full">
                 <button class="x-button lg w-full" data-action="click->x-cookieconsent-dialog#approve">Ano, souhlasím</button>
             </div>
             <div class="flex w-full gap-4">
-                <a class="x-button ghosted lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
-                <button class="x-button ghosted lg accent-main flex-1 px-4" data-action="click->x-cookieconsent-dialog#decline"><span>Nesouhlasím</span></button>
+                <a class="x-button bordered lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
+                <button class="x-button bordered lg accent-main flex-1 px-4" data-action="click->x-cookieconsent-dialog#decline"><span>Nesouhlasím</span></button>
             </div>
         </div>
     </div>

package/src/templates/components/dialog/DialogBasic.latte

@@ -4,7 +4,7 @@
             <h2 class="x-heading">Dialog Basic</h2>
             <button class="x-button square ghosted accent-main" type="button" data-action="click->x-dialog#close">
                 <svg>
-                    <use href="#icon-x-mark"></use>
+                    <use href="#heroicons-outline/x-mark"></use>
                 </svg>
             </button>
         </div>

package/src/templates/emails/layouts/default.latte

@@ -18,7 +18,7 @@
 
     <link rel="stylesheet" href="/src/styles/emails/main.css">
 
-    <script type="module" n:if="VITE_SERVER">
+    <script type="module" n:if="\VITE_SERVER">
         if (import.meta.hot && window.location.search === '?send') {
             import.meta.hot.send('my:send', {
                 filename: window.location.href,
@@ -32,7 +32,7 @@
 <body>
     <table class="x-main w-full" align="center">
         <tr>
-            <td class="p-[20px]" align="center">
+            <td class="p-container" align="center">
                 <table class="x-main-body container">
                     {include '../../utils/sections.latte', sections => $body}
                 </table>

package/src/templates/layouts/default.latte

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{$lang}">
     <head>
         <meta charset="utf-8">
         <title>{$title}</title>
@@ -38,7 +38,7 @@
             <link n:foreach="$modulepreload as $url" href="{$url|asset}" rel="modulepreload">
         {/if}
 
-        <script>
+        <script n:if="false">
             (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) && document.documentElement.classList.add('dark')
         </script>
 
@@ -50,11 +50,15 @@
         <link rel="manifest" href="/favicons/manifest.webmanifest">
     </head>
     <body data-controller="x-app invoke" data-naja-snippet-append>
-        {include '../components/(layout)/Header.latte'}
+        {if isset($head)}
+            {include '../utils/sections.latte', sections => $head}
+        {/if}
         <main class="x-main view-transition-main">
             {include '../utils/sections.latte', sections => $body}
         </main>
-        {include '../components/(layout)/Footer.latte'}
+        {if isset($foot)}
+            {include '../utils/sections.latte', sections => $foot}
+        {/if}
 
         {if $cookieConsent}
             {include '../components/cookieconsent/CookieConsentDialog.latte'}
@@ -63,9 +67,5 @@
         <ol class="x-toaster items-end">
             {*include TEMPLATES_DIR . 'Components/(ui)/Toast.latte'*}
         </ol>
-
-        {if true} {* load only on first load in production *}
-            {fetch('/src/icons.svg')|noescape}
-        {/if}
     </body>
 </html>

package/vite.config.js

@@ -2,11 +2,11 @@ import { defineConfig } from 'vite'
 import core from '@newlogic-digital/core'
 
 export default defineConfig({
-    plugins: [
-        core({
-            css: {
-                transformer: 'lightningcss'
-            }
-        })
-    ]
+  plugins: [
+    core({
+      css: {
+        transformer: 'lightningcss',
+      },
+    }),
+  ],
 })

package/src/icons.svg

@@ -1,8 +0,0 @@
-<svg class="hidden">
-    <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" />
-    </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/styles/components/cookieconsent/+.css

@@ -1 +0,0 @@
-@import "./CookieConsentDialog.css";

package/src/styles/components/cookieconsent/CookieConsentDialog.css

@@ -1,19 +0,0 @@
-@layer utilities {
-  .x-cookieconsent-dialog {
-    .x-dialog-content {
-      max-width: 32rem;
-    }
-
-    &.center {
-      .x-dialog-content {
-        max-width: 26rem;
-        text-align: center;
-
-        & .x-image {
-          margin-left: auto;
-          margin-right: auto;
-        }
-      }
-    }
-  }
-}