Change default license branch to main

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.5.7",
+    "version": "3.6.5",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
@@ -24,20 +24,20 @@
         "deploy": "grunt deploy"
     },
     "dependencies": {
-        "@picocss/pico": "^1.5.6"
+        "@picocss/pico": "^1.5.10"
     },
     "devDependencies": {
-        "grunt": "^1.5.3",
+        "grunt": "^1.6.1",
         "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.1",
-        "grunt-contrib-cssmin": "^4.0.0",
+        "grunt-contrib-cssmin": "^5.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
-        "grunt-webpack": "^5.0.0",
+        "grunt-webpack": "^6.0.0",
-        "ts-loader": "^9.4.2",
+        "ts-loader": "^9.5.1",
         "ts-node": "^10.9.1",
-        "typescript": "^4.9.4",
+        "typescript": "^5.3.2",
-        "webpack": "^5.75.0",
+        "webpack": "^5.89.0",
-        "webpack-cli": "^5.0.1"
+        "webpack-cli": "^5.1.4"
     }
 }

src/main/css/snippets/colors.css

@@ -1,27 +1,39 @@
 /* pico.css overrides, based on https://picocss.com/docs/customization.html */
+
+/* Light (default) */
 .fwd-nav,
-:root:not([data-theme]),
+[data-theme="light"],
-:root[data-theme="light"] {
+:root:not([data-theme="dark"]) {
     --primary: rgb(0, 51, 204) !important;
     --primary-hover: rgb(0, 61, 245) !important;
     --primary-focus: rgba(0, 41, 163, 0.125) !important;
     --primary-focus-opaque: rgb(0, 41, 163) !important;
     --primary-focus-dark: rgb(0, 29, 114) !important;
     --primary-inverse: white !important;
-
-    --form-element-active-border-color: var(--primary) !important;
-    --form-element-focus-color: var(--primary-focus) !important;
-    --switch-color: var(--primary-inverse) !important;
-    --switch-checked-background-color: var(--primary) !important;
 }
 
+/* Dark (auto) */
+@media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]):not(.fwd-nav) {
+        --primary: #1e88e5 !important;
+        --primary-hover: #2196f3 !important;
+        --primary-focus: rgba(30, 136, 229, 0.25) !important;
+        --primary-focus-opaque: rgb(30, 136, 229) !important;
+        --primary-inverse: white !important;
+    }
+}
+
+/* Dark (forced) */
 :root[data-theme="dark"]:not(.fwd-nav) {
     --primary: #1e88e5 !important;
     --primary-hover: #2196f3 !important;
     --primary-focus: rgba(30, 136, 229, 0.25) !important;
     --primary-focus-opaque: rgb(30, 136, 229) !important;
     --primary-inverse: white !important;
+}
 
+/* Common */
+:root {
     --form-element-active-border-color: var(--primary) !important;
     --form-element-focus-color: var(--primary-focus) !important;
     --switch-color: var(--primary-inverse) !important;

src/main/css/snippets/forms.css

@@ -83,4 +83,5 @@ input.valid,
     display: inline-block;
     width: unset;
     margin: 0;
+    padding: 0.3em;
 }

src/main/js/Template.ts

@@ -199,7 +199,7 @@ function footer(
     if (author === undefined) author = "Florine W. Dekker";
     if (authorURL === undefined) authorURL = "https://fwdekker.com/";
     if (license === undefined) license = "MIT";
-    if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/master/LICENSE`;
+    if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/main/LICENSE`;
     if (vcs === undefined && vcsURL !== undefined) vcs = "git";
     if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
 

src/main/js/Validation.ts

@@ -27,7 +27,9 @@ export function showMessageType(card: HTMLElement | HTMLFormElement,
                                 message?: string,
                                 type?: "busy" | "error" | "info" | "success" | "warning"): void {
     if (card instanceof HTMLFormElement) {
-        const formCard = $(`article[data-status-for="${card.id}"]`);
+        if (card.dataset.statusCard == null) return;
+
+        const formCard = $(`#${card.dataset.statusCard}`);
         if (formCard == null) return;
 
         card = formCard;

src/test/index.html

@@ -61,8 +61,8 @@
                         <h3>Already have an account? Welcome back!</h3>
                     </hgroup>
                 </header>
-                <form id="test-form" novalidate>
+                <form id="test-form" data-status-card="test-status-card" novalidate>
-                    <article class="status-card hidden" data-status-for="test-form">
+                    <article id="test-status-card" class="status-card hidden">
                         <output>Congrats!</output>
                         <a class="close" href="#" aria-label="Close"></a>
                     </article>