Bump the frontend group with 31 updates

.github/dependabot.yml

@@ -20,6 +20,21 @@ updates:
           - "*"
     schedule:
       interval: monthly
+    # Major versions which cannot be adopted yet. Minor and patch updates of
+    # these packages are still proposed as usual.
+    ignore:
+      # eslint-config-airbnb-extended declares eslint ^9 as peer dependency
+      - dependency-name: "eslint"
+        update-types: ["version-update:semver-major"]
+      - dependency-name: "@eslint/js"
+        update-types: ["version-update:semver-major"]
+      # Tailwind CSS 4 requires the separate @tailwindcss/postcss package and a
+      # CSS-first rewrite of the theme and safelist in tailwind.config.js
+      - dependency-name: "tailwindcss"
+        update-types: ["version-update:semver-major"]
+      # MapLibre GL JS 6 is ESM-only, but ts-loader emits CommonJS
+      - dependency-name: "maplibre-gl"
+        update-types: ["version-update:semver-major"]
 
   - package-ecosystem: devcontainers
     directory: "/"

integreat_cms/static/src/css/style.scss

@@ -1,10 +1,12 @@
 @use "sass:color";
 
-// Country flags - define these before tailwind to make it possible to override
-$fp-prepend: true;
-$fp-enable-1x1: false;
-$fp-4x3-path: "flagpack-dart-sass/flags/4x3/";
-@import "flagpack-dart-sass/src/flagpack.scss";
+// Country flags - configure these before tailwind to make it possible to override
+@use "flagpack-dart-sass/src/variables" with (
+    $fp-prepend: true,
+    $fp-enable-1x1: false,
+    $fp-4x3-path: "flagpack-dart-sass/flags/4x3/"
+);
+@use "flagpack-dart-sass/src/flagpack";
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";

integreat_cms/static/src/js/utils/create-icons.ts

@@ -1,14 +1,11 @@
-import { icons } from "lucide";
-import replaceElement from "lucide/dist/esm/replaceElement";
+import { createIcons, icons } from "lucide";
 
 // This function renders all <i icon-name="..."> children of `root`
 export const createIconsAt = (root: HTMLElement) => {
-    const elementsToReplace = root.querySelectorAll("[icon-name]");
-    Array.from(elementsToReplace).forEach((element) =>
-        replaceElement(element as HTMLElement, {
-            nameAttr: "icon-name",
-            icons,
-            attrs: { class: "inline-block" },
-        })
-    );
+    createIcons({
+        nameAttr: "icon-name",
+        icons,
+        attrs: { class: "inline-block" },
+        root,
+    });
 };