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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "4.0.0",
+  "version": "4.3.0-next.1",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
@@ -15,37 +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.6.13",
+    "@floating-ui/dom": "^1.7.6",
     "@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/cookieconsent-js": "^1.1.1",
+    "@newlogic-digital/naja-extensions": "^1.0.3",
+    "@newlogic-digital/stimulus-components": "^1.2.0",
     "@newlogic-digital/swup-plugins": "^1.0.0",
-    "@newlogic-digital/utils-js": "^1.1.1",
-    "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.1",
-    "winduum": "^2.1.0",
-    "winduum-stimulus": "^2.0.9"
+    "swup": "^4.8.3",
+    "winduum": "^2.2.17",
+    "winduum-stimulus": "^2.0.12"
   },
   "devDependencies": {
-    "@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"
+    "@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/pages/example/popover-autocomplete.json

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

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

@@ -1,4 +1,5 @@
 import './Button.js'
+import './Carousel.js'
 import './Compare.js'
 import './Control.js'
 import './ControlSelect.js'
@@ -6,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)/Carousel.js

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

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

@@ -3,9 +3,9 @@ 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 })
+  connect() {
+    validateField(this.element, { validate: false })
 
-        this.element.addEventListener('change', () => validateField(this.element))
-    }
+    this.element.addEventListener('change', () => validateField(this.element))
+  }
 })

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

@@ -2,16 +2,16 @@ 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()
+  connect() {
+    super.connect()
 
-        this.element.addEventListener('x-dialog:show', () => this.appendToaster(this.element))
-        this.element.addEventListener('close', () => this.appendToaster(document.body))
-    }
+    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')
+  appendToaster(parentElement) {
+    const toasterElement = document.querySelector('.x-toaster')
 
-        if (toasterElement) parentElement.appendChild(toasterElement)
-    }
+    if (toasterElement) parentElement.appendChild(toasterElement)
+  }
 })

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

@@ -3,13 +3,13 @@ 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()
-    }
+  requestSubmit() {
+    this.element.requestSubmit()
+  }
 
-    reset(event) {
-        this.element.reset()
+  reset(event) {
+    this.element.reset()
 
-        validateForm(event, { validateOptions: { validate: false } })
-    }
+    validateForm(event, { validateOptions: { validate: false } })
+  }
 })

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/components/(ui)/Popover.js

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

package/src/scripts/components/App.js

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

package/src/scripts/composables/naja.js

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

package/src/scripts/composables/stimulus.js

@@ -4,28 +4,28 @@ 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']
-    ]
+  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'],
+    ['.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)
+  stimulus.useController(controller, target, application)
 
 const initStimulus = (element, { controllers, actions } = initConfig) =>
-    stimulus.initStimulus(element, { controllers, actions })
+  stimulus.initStimulus(element, { controllers, actions })
 
 useStimulus.start().then(() => initStimulus(document.body))
 useStimulus.register('invoke', class extends InvokeFetch {
-    onFetchComplete(element) {
-        initAfter(element)
-    }
+  onFetchComplete(element) {
+    initAfter(element)
+  }
 })
 
 export { useStimulus, useController, Controller, initStimulus, initConfig }

package/src/scripts/composables/swup.js

@@ -1,23 +1,23 @@
 import Swup from 'swup'
 import { SwupCorePlugin } from '@newlogic-digital/swup-plugins'
 import initAfter from '../utils/initAfter.js'
-import { useController } from 'winduum-stimulus'
+import { useController } from './stimulus.js'
 
 const useSwup = new Swup({
-    containers: ['.x-main', '.x-header', '.x-toaster'],
-    plugins: [new SwupCorePlugin()]
+  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')
+  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))
-    })
+  useSwup.options.containers.forEach((selector) => {
+    initAfter(document.querySelector(selector))
+  })
 })
 
 export { useSwup }

package/src/scripts/main.js

@@ -1,3 +1,4 @@
+import './composables/naja.js'
 import './composables/stimulus.js'
 import './composables/swup.js'
 import './components/+.js'

package/src/scripts/utils/initAfter.js

@@ -4,8 +4,8 @@ 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)
+  initStimulus(element)
+  initNaja(element)
+  replaceScripts(element)
+  initCookieConsent(element)
 }

package/src/styles/base/+.css

@@ -2,3 +2,4 @@
 @import "./defaults.css";
 @import "./keyframes.css";
 @import "./transitions.css";
+@import "./variants.css";

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;
   }
 }
@@ -27,10 +25,16 @@
 }
 
 :where([type="number"]) {
-  -moz-appearance: textfield;
+  appearance: textfield;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+:where([type="search"]) {
+  &::-webkit-search-cancel-button {
+    appearance: none;
   }
 }

package/src/styles/base/transitions.css

@@ -1,6 +1,6 @@
 @import "winduum/src/base/transitions.css";
 
-.view-transition-main {
+@utility view-transition-main {
   html.swup-enabled & {
     transition: opacity var(--view-transition-main-duration);
     opacity: 1;

package/src/styles/base/variants.css

@@ -0,0 +1,11 @@
+@variant hocus {
+  @media (hover: hover) {
+    &:hover {
+      @slot;
+    }
+  }
+
+  &:focus-visible {
+    @slot;
+  }
+}

package/src/styles/components/(layout)/Header.css

@@ -1,11 +1,13 @@
-:root {
+@theme {
   --x-header-height: 4rem;
   --scroll-padding-top: calc(var(--x-header-height) + 1rem);
 }
 
-.x-header {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-index-20);
-  height: var(--x-header-height);
+@layer utilities {
+  .x-header {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index-20);
+    height: var(--x-header-height);
+  }
 }

package/src/styles/components/(layout)/Main.css

@@ -1,20 +1,24 @@
-html {
-  scroll-padding-top: var(--scroll-padding-top);
+@layer base {
+  html {
+    scroll-padding-top: var(--scroll-padding-top);
 
-  @media (min-width: 60em) and (max-width: 75.9375rem) {
-    font-size: 87.5%;
+    @media (min-width: 60em) and (max-width: 75.9375rem) {
+      font-size: 87.5%;
+    }
   }
-}
 
-body {
-  background-color: var(--color-body);
-  display: flex;
-  flex-direction: column;
-  overflow-x: clip;
+  body {
+    background-color: var(--color-body);
+    display: flex;
+    flex-direction: column;
+    overflow-x: clip;
+  }
 }
 
-.x-main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
+@layer utilities {
+  .x-main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
 }