New version

tomayac · tomayac · commit c258ae4bf502 · 2024-09-23T10:39:54.000+02:00
diff --git a/demo/common.css b/demo/common.css
@@ -28,7 +28,8 @@
 
 body {
   margin: 0;
-  transition: color var(--duration) var(--timing),
+  transition:
+    color var(--duration) var(--timing),
     background-color var(--duration) var(--timing);
   font-family: sans-serif;
   font-size: 12pt;
diff --git a/demo/dark-mode-toggle-playground.mjs b/demo/dark-mode-toggle-playground.mjs
@@ -27,14 +27,14 @@
     colorScheme.content = e.detail.colorScheme;
     icon.href = e.detail.colorScheme === 'dark' ? 'moon.png' : 'sun.png';
     console.log(
-        `${e.target.id} changed the color scheme to ${e.detail.colorScheme}`,
+      `${e.target.id} changed the color scheme to ${e.detail.colorScheme}`,
     );
   });
 
   doc.addEventListener('permanentcolorscheme', (e) => {
     const permanent = e.detail.permanent;
     console.log(
-        `${permanent ? 'R' : 'Not r'}emembering the last selected mode.`,
+      `${permanent ? 'R' : 'Not r'}emembering the last selected mode.`,
     );
   });
 })(document);
diff --git a/demo/dist.html b/demo/dist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>Hello Dark Mode</title>
diff --git a/demo/index.html b/demo/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>Hello Dark Mode</title>
diff --git a/demo/slider.css b/demo/slider.css
@@ -22,7 +22,9 @@ dark-mode-toggle.slider::part(toggleLabel)::before {
   height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
   width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
   border-radius: 100%;
-  box-shadow: 0 0.15em 0.3em rgb(0 0 0 / 15%), 0 0.2em 0.5em rgb(0 0 0 / 30%);
+  box-shadow:
+    0 0.15em 0.3em rgb(0 0 0 / 15%),
+    0 0.2em 0.5em rgb(0 0 0 / 30%);
   background-color: #fff;
   color: #333;
   transition: 0.4s;
diff --git a/demo/unstyled.html b/demo/unstyled.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/demo/with-flashing.html b/demo/with-flashing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <link
diff --git a/demo/without-flashing.html b/demo/without-flashing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <noscript id="dark-mode-toggle-stylesheets">
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,18 @@
+// eslint.config.js
+module.exports = [
+  {
+    languageOptions: {
+      ecmaVersion: 8,
+      sourceType: 'module',
+    },
+    rules: {
+      'require-jsdoc': 'off',
+      'max-len': [
+        'error',
+        {
+          ignoreTemplateLiterals: true,
+        },
+      ],
+    },
+  },
+];
diff --git a/package.json b/package.json
@@ -52,30 +52,6 @@
     "stylelint-config-standard": "^36.0.1",
     "terser": "^5.33.0"
   },
-  "eslintConfig": {
-    "parserOptions": {
-      "ecmaVersion": 8,
-      "sourceType": "module"
-    },
-    "extends": [
-      "google"
-    ],
-    "env": {
-      "es6": true,
-      "browser": true,
-      "serviceworker": true,
-      "node": true
-    },
-    "rules": {
-      "require-jsdoc": 0,
-      "max-len": [
-        "error",
-        {
-          "ignoreTemplateLiterals": true
-        }
-      ]
-    }
-  },
   "stylelint": {
     "extends": "stylelint-config-standard",
     "rules": {
diff --git a/src/dark-mode-toggle.mjs b/src/dark-mode-toggle.mjs
@@ -79,7 +79,7 @@ const installBoolReflection = (obj, attrName, propName = attrName) => {
 const template = doc.createElement('template');
 // ⚠️ Note: this is a minified version of `src/template-contents.tpl`.
 // Compress the CSS with https://cssminifier.com/, then paste it here.
-// eslint-disable-next-line max-len
+
 template.innerHTML = `<style>*,::after,::before{box-sizing:border-box}:host{contain:content;display:block}:host([hidden]){display:none}form{background-color:var(--${NAME}-background-color,transparent);color:var(--${NAME}-color,inherit);padding:0}fieldset{border:none;margin:0;padding-block:.25rem;padding-inline:.25rem}legend{font:var(--${NAME}-legend-font,inherit);padding:0}input,label{cursor:pointer}label{white-space:nowrap}input{opacity:0;position:absolute;pointer-events:none}input:focus-visible+label{outline:#e59700 auto 2px;outline:-webkit-focus-ring-color auto 5px}label::before{content:"";display:inline-block;background-size:var(--${NAME}-icon-size,1rem);background-repeat:no-repeat;height:var(--${NAME}-icon-size,1rem);width:var(--${NAME}-icon-size,1rem);vertical-align:middle}label:not(:empty)::before{margin-inline-end:.5rem}[part=lightLabel]::before,[part=lightThreeWayLabel]::before{background-image:var(--${NAME}-light-icon, url("${DEFAULT_URL}sun.png"))}[part=darkLabel]::before,[part=darkThreeWayLabel]::before{filter:var(--${NAME}-icon-filter, none);background-image:var(--${NAME}-dark-icon, url("${DEFAULT_URL}moon.png"))}[part=systemThreeWayLabel]::before{background-image:var(--${NAME}-system-icon, url("${DEFAULT_URL}system.png"))}[part=toggleLabel]::before{background-image:var(--${NAME}-checkbox-icon,none)}[part=permanentLabel]::before{background-image:var(--${NAME}-remember-icon-unchecked, url("${DEFAULT_URL}unchecked.svg"))}[part$=ThreeWayLabel],[part=darkLabel],[part=lightLabel],[part=toggleLabel]{font:var(--${NAME}-label-font,inherit)}[part$=ThreeWayLabel]:empty,[part=darkLabel]:empty,[part=lightLabel]:empty,[part=toggleLabel]:empty{font-size:0;padding:0}[part=permanentLabel]{font:var(--${NAME}-remember-font,inherit)}input:checked+[part=permanentLabel]::before{background-image:var(--${NAME}-remember-icon-checked, url("${DEFAULT_URL}checked.svg"))}input:checked+[part$=ThreeWayLabel],input:checked+[part=darkLabel],input:checked+[part=lightLabel]{background-color:var(--${NAME}-active-mode-background-color,transparent)}input:checked+[part$=ThreeWayLabel]::before,input:checked+[part=darkLabel]::before,input:checked+[part=lightLabel]::before{background-color:var(--${NAME}-active-mode-background-color,transparent)}input:checked+[part=toggleLabel]::before,input[part=toggleCheckbox]:checked~[part=threeWayRadioWrapper] [part$=ThreeWayLabel]::before{filter:var(--${NAME}-icon-filter, none)}input:checked+[part=toggleLabel]~aside [part=permanentLabel]::before{filter:var(--${NAME}-remember-filter, invert(100%))}aside{visibility:hidden;margin-block-start:.15rem}[part=darkLabel]:focus-visible~aside,[part=lightLabel]:focus-visible~aside,[part=toggleLabel]:focus-visible~aside{visibility:visible;transition:visibility 0s}aside [part=permanentLabel]:empty{display:none}@media (hover:hover){aside{transition:visibility 3s}aside:hover{visibility:visible}[part=darkLabel]:hover~aside,[part=lightLabel]:hover~aside,[part=toggleLabel]:hover~aside{visibility:visible;transition:visibility 0s}}</style><form part=form><fieldset part=fieldset><legend part=legend></legend><input id=l part=lightRadio type=radio name=mode> <label for=l part=lightLabel></label> <input id=d part=darkRadio type=radio name=mode> <label for=d part=darkLabel></label> <input id=t part=toggleCheckbox type=checkbox> <label for=t part=toggleLabel></label> <span part=threeWayRadioWrapper><input id=3l part=lightThreeWayRadio type=radio name=three-way-mode> <label for=3l part=lightThreeWayLabel></label> <input id=3s part=systemThreeWayRadio type=radio name=three-way-mode> <label for=3s part=systemThreeWayLabel></label> <input id=3d part=darkThreeWayRadio type=radio name=three-way-mode> <label for=3d part=darkThreeWayLabel></label></span><aside part=aside><input id=p part=permanentCheckbox type=checkbox> <label for=p part=permanentLabel></label></aside></fieldset></form>`;
 
 export class DarkModeToggle extends HTMLElement {
@@ -120,16 +120,16 @@ export class DarkModeToggle extends HTMLElement {
   }
 
   _initializeDOM() {
-    const shadowRoot = this.attachShadow({mode: 'open'});
+    const shadowRoot = this.attachShadow({ mode: 'open' });
     shadowRoot.append(template.content.cloneNode(true));
 
     // We need to support `media="(prefers-color-scheme: dark)"` (with space)
     // and `media="(prefers-color-scheme:dark)"` (without space)
     this._darkCSS = doc.querySelectorAll(
-        `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`,
+      `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`,
     );
     this._lightCSS = doc.querySelectorAll(
-        `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`,
+      `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`,
     );
 
     // Get DOM references.
@@ -140,27 +140,27 @@ export class DarkModeToggle extends HTMLElement {
     this._darkCheckbox = shadowRoot.querySelector('[part=toggleCheckbox]');
     this._checkboxLabel = shadowRoot.querySelector('[part=toggleLabel]');
     this._lightThreeWayRadio = shadowRoot.querySelector(
-        '[part=lightThreeWayRadio]',
+      '[part=lightThreeWayRadio]',
     );
     this._lightThreeWayLabel = shadowRoot.querySelector(
-        '[part=lightThreeWayLabel]',
+      '[part=lightThreeWayLabel]',
     );
     this._systemThreeWayRadio = shadowRoot.querySelector(
-        '[part=systemThreeWayRadio]',
+      '[part=systemThreeWayRadio]',
     );
     this._systemThreeWayLabel = shadowRoot.querySelector(
-        '[part=systemThreeWayLabel]',
+      '[part=systemThreeWayLabel]',
     );
     this._darkThreeWayRadio = shadowRoot.querySelector(
-        '[part=darkThreeWayRadio]',
+      '[part=darkThreeWayRadio]',
     );
     this._darkThreeWayLabel = shadowRoot.querySelector(
-        '[part=darkThreeWayLabel]',
+      '[part=darkThreeWayLabel]',
     );
     this._legendLabel = shadowRoot.querySelector('legend');
     this._permanentAside = shadowRoot.querySelector('aside');
     this._permanentCheckbox = shadowRoot.querySelector(
-        '[part=permanentCheckbox]',
+      '[part=permanentCheckbox]',
     );
     this._permanentLabel = shadowRoot.querySelector('[part=permanentLabel]');
   }
@@ -170,12 +170,12 @@ export class DarkModeToggle extends HTMLElement {
     const hasNativePrefersColorScheme = matchMedia(MQ_DARK).media !== NOT_ALL;
     // Listen to `prefers-color-scheme` changes.
     if (hasNativePrefersColorScheme) {
-      matchMedia(MQ_DARK).addListener(({matches}) => {
+      matchMedia(MQ_DARK).addListener(({ matches }) => {
         if (this.permanent) {
           return;
         }
         this.mode = matches ? DARK : LIGHT;
-        this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+        this._dispatchEvent(COLOR_SCHEME_CHANGE, { colorScheme: this.mode });
       });
     }
     // Set initial state, giving preference to a remembered value, then the
@@ -228,22 +228,22 @@ export class DarkModeToggle extends HTMLElement {
         this.mode = this._lightRadio.checked ? LIGHT : DARK;
         this._updateCheckbox();
         this._updateThreeWayRadios();
-        this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+        this._dispatchEvent(COLOR_SCHEME_CHANGE, { colorScheme: this.mode });
       });
     });
     this._darkCheckbox.addEventListener('change', () => {
       this.mode = this._darkCheckbox.checked ? DARK : LIGHT;
       this._updateRadios();
       this._updateThreeWayRadios();
-      this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+      this._dispatchEvent(COLOR_SCHEME_CHANGE, { colorScheme: this.mode });
     });
     this._lightThreeWayRadio.addEventListener('change', () => {
       this.mode = LIGHT;
       this.permanent = true;
       this._updateCheckbox();
       this._updateRadios();
       this._updateThreeWayRadios();
-      this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+      this._dispatchEvent(COLOR_SCHEME_CHANGE, { colorScheme: this.mode });
       this._dispatchEvent(PERMANENT_COLOR_SCHEME, {
         permanent: this.permanent,
       });
@@ -254,7 +254,7 @@ export class DarkModeToggle extends HTMLElement {
       this._updateCheckbox();
       this._updateRadios();
       this._updateThreeWayRadios();
-      this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+      this._dispatchEvent(COLOR_SCHEME_CHANGE, { colorScheme: this.mode });
       this._dispatchEvent(PERMANENT_COLOR_SCHEME, {
         permanent: this.permanent,
       });
@@ -265,7 +265,7 @@ export class DarkModeToggle extends HTMLElement {
       this._updateCheckbox();
       this._updateRadios();
       this._updateThreeWayRadios();
-      this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+      this._dispatchEvent(COLOR_SCHEME_CHANGE, { colorScheme: this.mode });
       this._dispatchEvent(PERMANENT_COLOR_SCHEME, {
         permanent: this.permanent,
       });
@@ -281,7 +281,7 @@ export class DarkModeToggle extends HTMLElement {
 
     // Finally update the mode and let the world know what's going on
     this._updateMode();
-    this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+    this._dispatchEvent(COLOR_SCHEME_CHANGE, { colorScheme: this.mode });
     this._dispatchEvent(PERMANENT_COLOR_SCHEME, {
       permanent: this.permanent,
     });
@@ -292,7 +292,7 @@ export class DarkModeToggle extends HTMLElement {
       const allAttributes = [LIGHT, SYSTEM, DARK];
       if (!allAttributes.includes(newValue)) {
         throw new RangeError(
-            `Allowed values are: "${allAttributes.join(`", "`)}".`,
+          `Allowed values are: "${allAttributes.join(`", "`)}".`,
         );
       }
       // Only show the dialog programmatically on devices not capable of hover
@@ -315,7 +315,7 @@ export class DarkModeToggle extends HTMLElement {
       const allAppearanceOptions = [TOGGLE, SWITCH, THREE_WAY];
       if (!allAppearanceOptions.includes(newValue)) {
         throw new RangeError(
-            `Allowed values are: "${allAppearanceOptions.join(`", "`)}".`,
+          `Allowed values are: "${allAppearanceOptions.join(`", "`)}".`,
         );
       }
       this._updateAppearance();
@@ -359,11 +359,11 @@ export class DarkModeToggle extends HTMLElement {
 
   _dispatchEvent(type, value) {
     this.dispatchEvent(
-        new CustomEvent(type, {
-          bubbles: true,
-          composed: true,
-          detail: value,
-        }),
+      new CustomEvent(type, {
+        bubbles: true,
+        composed: true,
+        detail: value,
+      }),
     );
   }
 
@@ -418,8 +418,8 @@ export class DarkModeToggle extends HTMLElement {
   _updateCheckbox() {
     if (this.mode === LIGHT) {
       this._checkboxLabel.style.setProperty(
-          `--${NAME}-checkbox-icon`,
-          `var(--${NAME}-light-icon,url("${DEFAULT_URL}moon.png"))`,
+        `--${NAME}-checkbox-icon`,
+        `var(--${NAME}-light-icon,url("${DEFAULT_URL}moon.png"))`,
       );
       this._checkboxLabel.textContent = this.light;
       if (!this.light) {
@@ -428,8 +428,8 @@ export class DarkModeToggle extends HTMLElement {
       this._darkCheckbox.checked = false;
     } else {
       this._checkboxLabel.style.setProperty(
-          `--${NAME}-checkbox-icon`,
-          `var(--${NAME}-dark-icon,url("${DEFAULT_URL}sun.png"))`,
+        `--${NAME}-checkbox-icon`,
+        `var(--${NAME}-dark-icon,url("${DEFAULT_URL}sun.png"))`,
       );
       this._checkboxLabel.textContent = this.dark;
       if (!this.dark) {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<title>Hello Dark Mode</title>`