Update dependencies

package.json

@@ -12,7 +12,7 @@
     "serve": "python3 -m http.server -d dist"
   },
   "dependencies": {
-    "jsx-dom-runtime": "^0.65.2",
+    "jsx-dom-runtime": "^0.67.2",
     "rgb-hex": "^4.1.0",
     "storeon-velo": "^5.0.0-rc.5",
     "tinykeys": "^2.1.0",
@@ -23,8 +23,8 @@
     "@evilmartians/lefthook": "^1.6.10",
     "@types/css-modules": "^1.0.5",
     "@types/wicg-file-system-access": "^2023.10.5",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "babel-plugin-transform-remove-polyfill": "^0.24.1",
@@ -40,7 +40,7 @@
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.3.1",
+    "stylelint": "^16.4.0",
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-standard": "^36.0.0",
     "terser-webpack-plugin": "^5.3.10",

src/components/ColorPicker/index.tsx

@@ -7,15 +7,13 @@ import { connect, dispatch } from '../../store';
 customElements.define('color-picker', HexAlphaBase);
 
 export const ColorPicker: JSX.FC = () => {
-  const ready: JSX.Ref<HexAlphaBase> = (node) => {
+  const ready: JSX.Ref<HexAlphaBase> = (node) =>
     connect('hex', (state) => {
       node.color = '#' + state.hex;
     });
 
-    node.addEventListener('color-changed', (event) =>
-      dispatch('hex', event.detail.value.slice(1)),
-    );
-  };
+  const changed = (event: CustomEvent) =>
+    dispatch('hex', event.detail.value.slice(1));
 
   return (
     <Group
@@ -25,6 +23,7 @@ export const ColorPicker: JSX.FC = () => {
       <color-picker
         ref={ready}
         class={s.picker}
+        on:color-changed={changed}
       />
     </Group>
   );

src/components/Download/index.tsx

@@ -52,11 +52,11 @@ export const Download: JSX.FC = () => {
 
   return typeof showSaveFilePicker === 'function'
     ? (
-      <button onclick={buttonHandler} type="button" class={s.btn}>
+      <button on:click={buttonHandler} type="button" class={s.btn}>
         {content}
       </button>
     ) : (
-      <a onclick={linkHandler} role="button" class={s.btn} href="#">
+      <a on:click={linkHandler} role="button" class={s.btn} href="#">
         {content}
       </a>
     );

src/components/HotKeys/index.tsx

@@ -38,7 +38,7 @@ export const HotKeys: JSX.FC = () => (
   <div class={s.box}>
     <div>
       <div>Undo:</div>
-      <button type="button" class={s.btn} onclick={undo}>
+      <button type="button" class={s.btn} on:click={undo}>
         <kbd class={s.comb}>
           <span class={s.key}>{$mod}</span>
           <span class={s.key}>z</span>
@@ -47,7 +47,7 @@ export const HotKeys: JSX.FC = () => (
     </div>
     <div>
       <div>Redo:</div>
-      <button type="button" class={s.btn} onclick={redo}>
+      <button type="button" class={s.btn} on:click={redo}>
         <kbd class={s.comb}>
           <span class={s.key}>{$mod}</span>
           <span class={s.key}>Shift</span>

src/components/Output/RadixSelect.tsx

@@ -9,7 +9,7 @@ export const RadixSelect: JSX.FC = () => {
 
   return (
     <select
-      onchange={change}
+      on:change={change}
       class={s.radix}
       aria-label="byte base"
     >

src/components/Output/TextInput.tsx

@@ -19,7 +19,7 @@ export const TextInput: JSX.FC<Props> = ({ label, ref }) =>  (
     {label}
     <input
       ref={ref}
-      onclick={copy}
+      on:click={copy}
       class={s.inp}
       type="text"
       spellcheck="false"

src/components/RandomColor/index.tsx

@@ -11,7 +11,7 @@ export const RandomColor: JSX.FC = () => {
       type="button"
       aria-label="random color"
       class={s.btn}
-      onclick={click}
+      on:click={click}
     >
       <svg width="2.5em" fill="currentcolor" viewBox="0 0 290 221">
         <path d="m239 128-36 79c-1 3-4 5-8 6l-86 8c-4 0-7-2-9-5l-50-70c-2-3-3-7-1-10l36-79c1-3 4-5 8-6l86-8c4 0 7 2 9 5l50 70c2 3 3 7 1 10zm-88 5 44 61 31-70-43-61-32 70zm32 67-42-59-74 6 42 60 74-7zM64 134l75-7 32-70-75 7-32 70zM54 43c7-15 20-23 35-25l2 6c-14 2-25 9-31 22l-6-3zM23 170c-9-13-11-28-6-43l7 2c-4 13-4 26 5 37l-6 4zM181 13c15 1 25 7 34 20l-6 4c-6-11-17-17-29-17l1-7zm89 92c7 15 6 30-2 44l-6-3c7-12 8-25 2-38l6-3zM46 31C53 16 65 8 81 6l1 6c-13 2-24 9-30 22l-6-3zM9 172c-10-13-11-28-6-43l6 2c-4 13-3 26 5 37l-5 4zM183 0c16 0 29 7 38 20l-5 4c-8-11-19-18-33-17V0zm102 106c7 15 5 30-2 44l-6-3c7-12 8-25 2-38l6-3z" />

src/components/RgbaInputs/PairInputs.tsx

@@ -32,7 +32,7 @@ export const PairInputs: JSX.FC<Props> = ({ param }) => {
         ref={number}
         type="number"
         class={s.number}
-        oninput={input}
+        on:input={input}
         max={255}
         min={0}
         step={1}
@@ -42,7 +42,7 @@ export const PairInputs: JSX.FC<Props> = ({ param }) => {
         ref={range}
         type="range"
         class={s.range}
-        oninput={input}
+        on:input={input}
         max={255}
         min={0}
         step={1}