From 24c6fa5d255aac1de7a51e0b21e321b9f673d81a Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 15 Jan 2024 11:37:30 -0700
Subject: [PATCH 01/29] wip

---
 package-lock.json     | 211 +++++++++++++++---------------------------
 package.json          |  12 +--
 src/routes/package.ts |  12 +--
 3 files changed, 87 insertions(+), 148 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f16eed01..7e67b95af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,23 +14,23 @@
         "@fuz.dev/fuz_code": "^0.5.0",
         "@fuz.dev/fuz_dialog": "^0.6.0",
         "@fuz.dev/fuz_library": "^0.23.0",
-        "@grogarden/gro": "^0.108.0",
+        "@grogarden/gro": "^0.110.2",
         "@ryanatkn/orc": "^0.17.0",
         "@sveltejs/adapter-static": "^3.0.1",
-        "@sveltejs/kit": "^2.0.6",
+        "@sveltejs/kit": "^2.3.2",
         "@sveltejs/package": "^2.2.5",
         "@sveltejs/vite-plugin-svelte": "^3.0.1",
         "@types/prismjs": "^1.26.3",
-        "@typescript-eslint/eslint-plugin": "^6.16.0",
-        "@typescript-eslint/parser": "^6.16.0",
+        "@typescript-eslint/eslint-plugin": "^6.19.0",
+        "@typescript-eslint/parser": "^6.19.0",
         "eslint": "^8.56.0",
         "eslint-plugin-svelte": "^2.35.1",
-        "prettier": "^3.1.1",
+        "prettier": "^3.2.2",
         "prettier-plugin-svelte": "^3.1.2",
         "prism-svelte": "^0.5.0",
         "prismjs": "^1.29.0",
         "svelte": "^4.2.8",
-        "svelte-check": "^3.6.2",
+        "svelte-check": "^3.6.3",
         "tslib": "^2.6.2",
         "typescript": "^5.3.3",
         "uvu": "^0.5.6"
@@ -64,18 +64,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@apidevtools/json-schema-ref-parser": {
-      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz",
-      "integrity": "sha512-GBD2Le9w2+lVFoc4vswGI/TjkNIZSVp7+9xPf+X3uidBfWnAeUWmquteSyt0+VCrhNMWj/FTABISQrD3Z/YA+w==",
-      "dev": true,
-      "dependencies": {
-        "@jsdevtools/ono": "^7.1.3",
-        "@types/json-schema": "^7.0.6",
-        "call-me-maybe": "^1.0.1",
-        "js-yaml": "^4.1.0"
-      }
-    },
     "node_modules/@changesets/changelog-git": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.2.0.tgz",
@@ -596,13 +584,12 @@
       }
     },
     "node_modules/@grogarden/gro": {
-      "version": "0.108.0",
-      "resolved": "https://registry.npmjs.org/@grogarden/gro/-/gro-0.108.0.tgz",
-      "integrity": "sha512-SQNwvOTAmufyLCUNaMIDnb/ANe4iE0NrOpplEcbMNxzdob16LL5KHzUvW7rOC7Ia0En0bouIkwSZ/jLVgEBYKw==",
+      "version": "0.110.2",
+      "resolved": "https://registry.npmjs.org/@grogarden/gro/-/gro-0.110.2.tgz",
+      "integrity": "sha512-Yz9/4Wmp7W3my9iqEHJ0rS6alFBAdOumfIqyQrgKwMwkOfZ/qEcZvPmmoduJqBKDIPEa3PL5rdC/qjwdDyZXXA==",
       "dev": true,
       "dependencies": {
-        "@grogarden/util": "^0.18.3",
-        "@ryanatkn/json-schema-to-typescript": "^11.1.5",
+        "@grogarden/util": "^0.19.0",
         "chokidar": "^3.5.3",
         "dotenv": "^16.3.1",
         "es-module-lexer": "^1.4.1",
@@ -627,9 +614,9 @@
       }
     },
     "node_modules/@grogarden/util": {
-      "version": "0.18.3",
-      "resolved": "https://registry.npmjs.org/@grogarden/util/-/util-0.18.3.tgz",
-      "integrity": "sha512-SjWgm3xAv7/J2Xjy61Yn34QrhMilMJJXwW4ywhNy3JS3If18abc8ewThlLVfTUSxdzdSxoAmRVAY+TyylkENgA==",
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@grogarden/util/-/util-0.19.3.tgz",
+      "integrity": "sha512-5rrCjgd/5qLas0tcNkfkcEmMNJDtRaHCly+0XHjITL/+0dGnO1hnwsrCSbdxOZ8qvD0knPaT5iJ5pIv3vqNg2A==",
       "dev": true,
       "engines": {
         "node": ">=20.10"
@@ -719,12 +706,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@jsdevtools/ono": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
-      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
-      "dev": true
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -948,22 +929,6 @@
       ],
       "peer": true
     },
-    "node_modules/@ryanatkn/json-schema-to-typescript": {
-      "version": "11.1.5",
-      "resolved": "https://registry.npmjs.org/@ryanatkn/json-schema-to-typescript/-/json-schema-to-typescript-11.1.5.tgz",
-      "integrity": "sha512-meUWQJW+duixeAGizv/dcQ7Xp/RUvCUJQ68ChLqMp8kS+yshpDtr9OhSu+LVnnCz7C57WoU5kuJK0qEtYGqtXg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.6",
-        "@types/lodash": "^4.14.168",
-        "json-schema-ref-parser": "^9.0.6",
-        "json-stringify-safe": "^5.0.1",
-        "lodash": "^4.17.20"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/@ryanatkn/orc": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/@ryanatkn/orc/-/orc-0.17.0.tgz",
@@ -988,9 +953,9 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.0.6.tgz",
-      "integrity": "sha512-dnHtyjBLGXx+hrZQ9GuqLlSfTBixewJaByUVWai7LmB4dgV3FwkK155OltEgONDQW6KW64hLNS/uojdx3uC2/g==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.3.2.tgz",
+      "integrity": "sha512-AzGWV1TyUSkBuciy06E5NegXndIEgTthDtllv80qynEJFh8bZD62ZxLajiQLOsKGqRDilEQyshDARQxjIqiaqg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -998,6 +963,7 @@
         "cookie": "^0.6.0",
         "devalue": "^4.3.2",
         "esm-env": "^1.0.0",
+        "import-meta-resolve": "^4.0.0",
         "kleur": "^4.1.5",
         "magic-string": "^0.30.5",
         "mrmime": "^2.0.0",
@@ -1148,12 +1114,6 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
-    "node_modules/@types/lodash": {
-      "version": "4.14.202",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
-      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
-      "dev": true
-    },
     "node_modules/@types/prismjs": {
       "version": "1.26.3",
       "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz",
@@ -1173,16 +1133,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.16.0.tgz",
-      "integrity": "sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.19.0.tgz",
+      "integrity": "sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.16.0",
-        "@typescript-eslint/type-utils": "6.16.0",
-        "@typescript-eslint/utils": "6.16.0",
-        "@typescript-eslint/visitor-keys": "6.16.0",
+        "@typescript-eslint/scope-manager": "6.19.0",
+        "@typescript-eslint/type-utils": "6.19.0",
+        "@typescript-eslint/utils": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -1208,15 +1168,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.16.0.tgz",
-      "integrity": "sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.0.tgz",
+      "integrity": "sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.16.0",
-        "@typescript-eslint/types": "6.16.0",
-        "@typescript-eslint/typescript-estree": "6.16.0",
-        "@typescript-eslint/visitor-keys": "6.16.0",
+        "@typescript-eslint/scope-manager": "6.19.0",
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/typescript-estree": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1236,13 +1196,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.16.0.tgz",
-      "integrity": "sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.19.0.tgz",
+      "integrity": "sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.16.0",
-        "@typescript-eslint/visitor-keys": "6.16.0"
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1253,13 +1213,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.16.0.tgz",
-      "integrity": "sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.19.0.tgz",
+      "integrity": "sha512-mcvS6WSWbjiSxKCwBcXtOM5pRkPQ6kcDds/juxcy/727IQr3xMEcwr/YLHW2A2+Fp5ql6khjbKBzOyjuPqGi/w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.16.0",
-        "@typescript-eslint/utils": "6.16.0",
+        "@typescript-eslint/typescript-estree": "6.19.0",
+        "@typescript-eslint/utils": "6.19.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -1280,9 +1240,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.16.0.tgz",
-      "integrity": "sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.19.0.tgz",
+      "integrity": "sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1293,13 +1253,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.16.0.tgz",
-      "integrity": "sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.19.0.tgz",
+      "integrity": "sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.16.0",
-        "@typescript-eslint/visitor-keys": "6.16.0",
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1345,17 +1305,17 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.16.0.tgz",
-      "integrity": "sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.19.0.tgz",
+      "integrity": "sha512-QR41YXySiuN++/dC9UArYOg4X86OAYP83OWTewpVx5ct1IZhjjgTLocj7QNxGhWoTqknsgpl7L+hGygCO+sdYw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.16.0",
-        "@typescript-eslint/types": "6.16.0",
-        "@typescript-eslint/typescript-estree": "6.16.0",
+        "@typescript-eslint/scope-manager": "6.19.0",
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/typescript-estree": "6.19.0",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -1370,12 +1330,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.16.0.tgz",
-      "integrity": "sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.19.0.tgz",
+      "integrity": "sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.16.0",
+        "@typescript-eslint/types": "6.19.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -1545,12 +1505,6 @@
         "node": "*"
       }
     },
-    "node_modules/call-me-maybe": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
-      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
-      "dev": true
-    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2328,6 +2282,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-meta-resolve": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz",
+      "integrity": "sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -2437,19 +2401,6 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
-    "node_modules/json-schema-ref-parser": {
-      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz",
-      "integrity": "sha512-qcP2lmGy+JUoQJ4DOQeLaZDqH9qSkeGCK3suKWxJXS82dg728Mn3j97azDMaOUmJAN4uCq91LdPx4K7E8F1a7Q==",
-      "deprecated": "Please switch to @apidevtools/json-schema-ref-parser",
-      "dev": true,
-      "dependencies": {
-        "@apidevtools/json-schema-ref-parser": "9.0.9"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -2462,12 +2413,6 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2535,12 +2480,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2988,9 +2927,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
-      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.2.tgz",
+      "integrity": "sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -3353,9 +3292,9 @@
       }
     },
     "node_modules/svelte-check": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.2.tgz",
-      "integrity": "sha512-E6iFh4aUCGJLRz6QZXH3gcN/VFfkzwtruWSRmlKrLWQTiO6VzLsivR6q02WYLGNAGecV3EocqZuCDrC2uttZ0g==",
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.3.tgz",
+      "integrity": "sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.17",
diff --git a/package.json b/package.json
index 5a6c97c7c..580aa50b7 100644
--- a/package.json
+++ b/package.json
@@ -42,23 +42,23 @@
     "@fuz.dev/fuz_code": "^0.5.0",
     "@fuz.dev/fuz_dialog": "^0.6.0",
     "@fuz.dev/fuz_library": "^0.23.0",
-    "@grogarden/gro": "^0.108.0",
+    "@grogarden/gro": "^0.110.2",
     "@ryanatkn/orc": "^0.17.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/kit": "^2.3.2",
     "@sveltejs/package": "^2.2.5",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/prismjs": "^1.26.3",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "eslint": "^8.56.0",
     "eslint-plugin-svelte": "^2.35.1",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.2",
     "prettier-plugin-svelte": "^3.1.2",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
     "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
+    "svelte-check": "^3.6.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "uvu": "^0.5.6"
diff --git a/src/routes/package.ts b/src/routes/package.ts
index 27452726e..52504fbf3 100644
--- a/src/routes/package.ts
+++ b/src/routes/package.ts
@@ -31,23 +31,23 @@ export const package_json = {
 		'@fuz.dev/fuz_code': '^0.5.0',
 		'@fuz.dev/fuz_dialog': '^0.6.0',
 		'@fuz.dev/fuz_library': '^0.23.0',
-		'@grogarden/gro': '^0.108.0',
+		'@grogarden/gro': '^0.110.2',
 		'@ryanatkn/orc': '^0.17.0',
 		'@sveltejs/adapter-static': '^3.0.1',
-		'@sveltejs/kit': '^2.0.6',
+		'@sveltejs/kit': '^2.3.2',
 		'@sveltejs/package': '^2.2.5',
 		'@sveltejs/vite-plugin-svelte': '^3.0.1',
 		'@types/prismjs': '^1.26.3',
-		'@typescript-eslint/eslint-plugin': '^6.16.0',
-		'@typescript-eslint/parser': '^6.16.0',
+		'@typescript-eslint/eslint-plugin': '^6.19.0',
+		'@typescript-eslint/parser': '^6.19.0',
 		eslint: '^8.56.0',
 		'eslint-plugin-svelte': '^2.35.1',
-		prettier: '^3.1.1',
+		prettier: '^3.2.2',
 		'prettier-plugin-svelte': '^3.1.2',
 		'prism-svelte': '^0.5.0',
 		prismjs: '^1.29.0',
 		svelte: '^4.2.8',
-		'svelte-check': '^3.6.2',
+		'svelte-check': '^3.6.3',
 		tslib: '^2.6.2',
 		typescript: '^5.3.3',
 		uvu: '^0.5.6',

From 4298ff33cf3b9d058706ee5a186b064afaa93dca Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 15 Jan 2024 11:53:47 -0700
Subject: [PATCH 02/29] wip

---
 src/lib/style.css                        | 29 ++++++++++++++++++++++++
 src/routes/library/elements/+page.svelte |  4 ++--
 src/routes/library/forms/+page.svelte    | 12 ++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index 29bfe5040..a6181e1a5 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -469,6 +469,35 @@ label.disabled:active {
 	background: var(--button_bg_disabled);
 }
 
+button.color_1 {
+	background-color: var(--color_1);
+	color: var(--lighten_7);
+}
+button.color_2 {
+	background-color: var(--color_2);
+	color: var(--lighten_7);
+}
+button.color_3 {
+	background-color: var(--color_3);
+	color: var(--lighten_7);
+}
+button.color_4 {
+	background-color: var(--color_4);
+	color: var(--lighten_7);
+}
+button.color_5 {
+	background-color: var(--color_5);
+	color: var(--lighten_7);
+}
+button.color_6 {
+	background-color: var(--color_6);
+	color: var(--lighten_7);
+}
+button.color_7 {
+	background-color: var(--color_7);
+	color: var(--lighten_7);
+}
+
 /* TODO could improve this with the coming `:has` selector
 for disabled colors without needing a wrapper .disabled class */
 label {
diff --git a/src/routes/library/elements/+page.svelte b/src/routes/library/elements/+page.svelte
index 180c86b1a..e9d11cc45 100644
--- a/src/routes/library/elements/+page.svelte
+++ b/src/routes/library/elements/+page.svelte
@@ -12,8 +12,8 @@
 
 <Tome_Detail {tome}>
 	<div class="prose box">
-		<blockquote>
-			styles for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element"
+		<blockquote class="text_align_center">
+			styles for miscellaneous <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element"
 				>HTML elements</a
 			>
 		</blockquote>
diff --git a/src/routes/library/forms/+page.svelte b/src/routes/library/forms/+page.svelte
index 181b608a5..cf8c78da6 100644
--- a/src/routes/library/forms/+page.svelte
+++ b/src/routes/library/forms/+page.svelte
@@ -266,6 +266,18 @@
 
 	<hr />
 
+	<section class="prose box">
+		<h3>colorful buttons</h3>
+	</section>
+	<br />
+	{#each {length: 7} as _, i}
+		<Code content={`<button class="color_${i + 1}">`} />
+		<button class="color_{i + 1}">.color_{i + 1}</button>
+		<br />
+	{/each}
+
+	<hr />
+
 	<section class="prose box">
 		<h3><code>.plain</code> and <code>.icon_button</code></h3>
 	</section>

From ba85092e6ad23caa9fefdc548dc16828a5fe2d8e Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 15 Jan 2024 11:57:41 -0700
Subject: [PATCH 03/29] wip

---
 src/lib/style.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/lib/style.css b/src/lib/style.css
index a6181e1a5..58ea9edd5 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -469,6 +469,18 @@ label.disabled:active {
 	background: var(--button_bg_disabled);
 }
 
+/* TODO how do we want to do the generic declarations?
+repeat in each? or maybe:
+button.color_1, button.color_1, button.color_1 button.color_1 {
+	color: var(--lighten_7);
+}
+
+or require a second class to the buttons?
+button.color {
+	color: var(--lighten_7);
+}
+*/
+
 button.color_1 {
 	background-color: var(--color_1);
 	color: var(--lighten_7);

From 5b156a1aeb77cc8feb595a1d6b9398f43629a10f Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 15 Jan 2024 12:10:51 -0700
Subject: [PATCH 04/29] wip

---
 src/routes/library/buttons/+page.svelte | 230 ++++++++++++++++++++++++
 src/routes/library/forms/+page.svelte   | 220 +----------------------
 src/routes/library/tomes.ts             |  21 ++-
 3 files changed, 246 insertions(+), 225 deletions(-)
 create mode 100644 src/routes/library/buttons/+page.svelte

diff --git a/src/routes/library/buttons/+page.svelte b/src/routes/library/buttons/+page.svelte
new file mode 100644
index 000000000..1f84e3662
--- /dev/null
+++ b/src/routes/library/buttons/+page.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
+	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
+	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
+	import 'prism-svelte';
+	import Code from '@fuz.dev/fuz_code/Code.svelte';
+
+	const LIBRARY_ITEM_NAME = 'buttons';
+
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+
+	let selected_button = 1;
+	let selected_deselectable_button = true;
+</script>
+
+<Tome_Detail {tome}>
+	<section class="prose box">
+		<h3>colorful buttons</h3>
+	</section>
+	<br />
+	{#each {length: 7} as _, i}
+		<Code content={`<button class="color_${i + 1}">`} />
+		<button class="color_{i + 1}">.color_{i + 1}</button>
+		<br />
+	{/each}
+
+	<hr />
+
+	<div class="box prose">
+		<h3>disabled button</h3>
+		<Code content={`<button disabled>\n\t:|\n</button>`} />
+		<button disabled>:|</button>
+		<Code content={`<button disabled>\n\ta bigger disabled button\n</button>`} />
+		<button disabled>a bigger disabled button</button>
+	</div>
+
+	<hr />
+
+	<div class="box">
+		<div class="prose">
+			<h3>
+				<code>button</code> with CSS class <code>.selected</code>
+			</h3>
+		</div>
+		<section style:margin-bottom="var(--spacing_4)">
+			<nav>
+				<button class:selected={selected_button === 0} on:click={() => (selected_button = 0)}>
+					button 0
+				</button>
+				<button class:selected={selected_button === 1} on:click={() => (selected_button = 1)}>
+					button 1
+				</button>
+				<button class:selected={selected_button === 2} on:click={() => (selected_button = 2)}>
+					button 2
+				</button>
+			</nav>
+		</section>
+		<div class="prose">
+			<section>
+				<Code content={`<button class="selected">...</button>`} />
+				<button class="width_full selected">a button with the <code>.selected</code> class</button>
+			</section>
+			<section>
+				<p class="width_sm">
+					<code>.selected</code> buttons with the <code>.deselectable</code> class continue to be clickable
+					when selected:
+				</p>
+				<Code content={`<button class="selected deselectable">\n\t...\n</button>`} />
+			</section>
+			<section>
+				<button
+					class="width_full deselectable"
+					class:selected={selected_deselectable_button}
+					on:click={() => (selected_deselectable_button = !selected_deselectable_button)}
+					>a <code>.deselectable</code>
+					{#if selected_deselectable_button}<code>.selected</code>{:else}unselected{/if} button</button
+				>
+				<button class="width_full selected deselectable" disabled={true}
+					>disabled <code>.deselectable</code> <code>.selected</code></button
+				>
+			</section>
+		</div>
+	</div>
+
+	<hr />
+
+	<section class="prose box">
+		<h3><code>.plain</code> and <code>.icon_button</code></h3>
+	</section>
+	<br />
+	<section class="box">
+		<Code
+			content={`<button class="plain">
+	+
+</button>`}
+		/>
+		<button class="plain">+</button>
+		<br />
+		<Code
+			content={`<button class="icon_button">
+	+
+</button>`}
+		/>
+		<button class="icon_button">+</button>
+		<br />
+		<Code
+			content={`<button class="plain icon_button">
+	+
+</button>`}
+		/>
+		<button class="plain icon_button">+</button>
+		<br />
+		<div class="prose box">
+			<h4><code>disabled</code> variants</h4>
+		</div>
+		<br />
+		<Code
+			content={`<button class="plain" disabled>
+	+
+</button>`}
+		/>
+		<button class="plain" disabled>+</button>
+		<br />
+		<Code
+			content={`<button class="icon_button" disabled>
+	+
+</button>`}
+		/>
+		<button class="icon_button" disabled>+</button>
+		<br />
+		<Code
+			content={`<button class="plain icon_button" disabled>
+	+
+</button>`}
+		/>
+		<button class="plain icon_button" disabled>+</button>
+		<br />
+		<div class="prose box">
+			<h4><code>.selected</code> variants</h4>
+		</div>
+		<br />
+		<Code
+			content={`<button class="plain selected">
+	+
+</button>`}
+		/>
+		<button class="plain selected">+</button>
+		<br />
+		<Code
+			content={`<button class="icon_button selected">
+	+
+</button>`}
+		/>
+		<button class="icon_button selected">+</button>
+		<br />
+		<Code
+			content={`<button class="plain icon_button selected">
+	+
+</button>`}
+		/>
+		<button class="plain icon_button selected">+</button>
+		<br />
+		<div class="prose box">
+			<h4><code>.selected</code> and <code>.deselectable</code> variants</h4>
+		</div>
+		<br />
+		<Code
+			content={`<button class="plain selected deselectable">
+	+
+</button>`}
+		/>
+		<button class="plain selected deselectable">+</button>
+		<br />
+		<Code
+			content={`<button class="icon_button selected deselectable">
+	+
+</button>`}
+		/>
+		<button class="icon_button selected deselectable">+</button>
+		<br />
+		<Code
+			content={`<button class="plain icon_button selected deselectable">
+	+
+</button>`}
+		/>
+		<button class="plain icon_button selected deselectable">+</button>
+		<br />
+	</section>
+
+	<hr />
+
+	<div class="box prose">
+		<section>
+			<h3>
+				<code>.buttonlike</code> CSS class
+			</h3>
+			<p class="width_sm">
+				the <code>.buttonlike</code> class is useful when you want interactive builtin elements to be
+				wrapped in a larger clickable area:
+			</p>
+		</section>
+		<section class="padded_md panel">
+			<Code content={`<label class="buttonlike">\n\t<input type="checkbox" />...\n</label>`} />
+			<label class="buttonlike padded_md row box">
+				<input type="checkbox" />
+				<div class="padded_sm">this entire thing is buttonlike, not just the checkbox</div>
+			</label>
+		</section>
+		<section class="padded_md panel">
+			<Code content={`<label class="buttonlike disabled">...</label>`} />
+			<label class="buttonlike padded_md row box disabled">
+				<input type="checkbox" disabled />
+				<div class="padded_sm">this is a <code>.disabled</code> buttonlike</div>
+			</label>
+		</section>
+		<section class="padded_md panel">
+			<Code content={`<div class="buttonlike selected padded_md">...</div>`} />
+			<div class="buttonlike selected padded_md">
+				<code>.buttonlike</code> with <code>.selected</code>
+			</div>
+		</section>
+		<section class="padded_md panel">
+			<Code content={`<div class="buttonlike deselectable selected padded_md">...</div>`} />
+			<div class="buttonlike deselectable selected padded_md">
+				<code>.buttonlike</code> with <code>.selected</code> and <code>.deselectable</code>
+			</div>
+		</section>
+		<blockquote>TODO: add more <code>deselectable</code> signifiers?</blockquote>
+	</div>
+</Tome_Detail>
diff --git a/src/routes/library/forms/+page.svelte b/src/routes/library/forms/+page.svelte
index cf8c78da6..e4a93d1d5 100644
--- a/src/routes/library/forms/+page.svelte
+++ b/src/routes/library/forms/+page.svelte
@@ -15,8 +15,6 @@
 	const ANIMATION_DURATION_FAST = 91; // ms
 
 	let created_account = false;
-	let selected_button = 1;
-	let selected_deselectable_button = true;
 
 	const faces = ['😊', '😑', '🤔', '😉'];
 
@@ -177,7 +175,7 @@
 
 	<div class="box prose">
 		<h3>
-			<code>form</code> with radio buttons
+			<code>form</code> with radio inputs
 		</h3>
 		<form>
 			<fieldset>
@@ -205,220 +203,4 @@
 			</fieldset>
 		</form>
 	</div>
-
-	<hr />
-
-	<div class="box prose">
-		<h3>disabled button</h3>
-		<Code content={`<button disabled>\n\t:|\n</button>`} />
-		<button disabled>:|</button>
-		<Code content={`<button disabled>\n\ta bigger disabled button\n</button>`} />
-		<button disabled>a bigger disabled button</button>
-	</div>
-
-	<hr />
-
-	<div class="box">
-		<div class="prose">
-			<h3>
-				<code>button</code> with CSS class <code>.selected</code>
-			</h3>
-		</div>
-		<section style:margin-bottom="var(--spacing_4)">
-			<nav>
-				<button class:selected={selected_button === 0} on:click={() => (selected_button = 0)}>
-					button 0
-				</button>
-				<button class:selected={selected_button === 1} on:click={() => (selected_button = 1)}>
-					button 1
-				</button>
-				<button class:selected={selected_button === 2} on:click={() => (selected_button = 2)}>
-					button 2
-				</button>
-			</nav>
-		</section>
-		<div class="prose">
-			<section>
-				<Code content={`<button class="selected">...</button>`} />
-				<button class="width_full selected">a button with the <code>.selected</code> class</button>
-			</section>
-			<section>
-				<p class="width_sm">
-					<code>.selected</code> buttons with the <code>.deselectable</code> class continue to be clickable
-					when selected:
-				</p>
-				<Code content={`<button class="selected deselectable">\n\t...\n</button>`} />
-			</section>
-			<section>
-				<button
-					class="width_full deselectable"
-					class:selected={selected_deselectable_button}
-					on:click={() => (selected_deselectable_button = !selected_deselectable_button)}
-					>a <code>.deselectable</code>
-					{#if selected_deselectable_button}<code>.selected</code>{:else}unselected{/if} button</button
-				>
-				<button class="width_full selected deselectable" disabled={true}
-					>disabled <code>.deselectable</code> <code>.selected</code></button
-				>
-			</section>
-		</div>
-	</div>
-
-	<hr />
-
-	<section class="prose box">
-		<h3>colorful buttons</h3>
-	</section>
-	<br />
-	{#each {length: 7} as _, i}
-		<Code content={`<button class="color_${i + 1}">`} />
-		<button class="color_{i + 1}">.color_{i + 1}</button>
-		<br />
-	{/each}
-
-	<hr />
-
-	<section class="prose box">
-		<h3><code>.plain</code> and <code>.icon_button</code></h3>
-	</section>
-	<br />
-	<section class="box">
-		<Code
-			content={`<button class="plain">
-	+
-</button>`}
-		/>
-		<button class="plain">+</button>
-		<br />
-		<Code
-			content={`<button class="icon_button">
-	+
-</button>`}
-		/>
-		<button class="icon_button">+</button>
-		<br />
-		<Code
-			content={`<button class="plain icon_button">
-	+
-</button>`}
-		/>
-		<button class="plain icon_button">+</button>
-		<br />
-		<div class="prose box">
-			<h4><code>disabled</code> variants</h4>
-		</div>
-		<br />
-		<Code
-			content={`<button class="plain" disabled>
-	+
-</button>`}
-		/>
-		<button class="plain" disabled>+</button>
-		<br />
-		<Code
-			content={`<button class="icon_button" disabled>
-	+
-</button>`}
-		/>
-		<button class="icon_button" disabled>+</button>
-		<br />
-		<Code
-			content={`<button class="plain icon_button" disabled>
-	+
-</button>`}
-		/>
-		<button class="plain icon_button" disabled>+</button>
-		<br />
-		<div class="prose box">
-			<h4><code>.selected</code> variants</h4>
-		</div>
-		<br />
-		<Code
-			content={`<button class="plain selected">
-	+
-</button>`}
-		/>
-		<button class="plain selected">+</button>
-		<br />
-		<Code
-			content={`<button class="icon_button selected">
-	+
-</button>`}
-		/>
-		<button class="icon_button selected">+</button>
-		<br />
-		<Code
-			content={`<button class="plain icon_button selected">
-	+
-</button>`}
-		/>
-		<button class="plain icon_button selected">+</button>
-		<br />
-		<div class="prose box">
-			<h4><code>.selected</code> and <code>.deselectable</code> variants</h4>
-		</div>
-		<br />
-		<Code
-			content={`<button class="plain selected deselectable">
-	+
-</button>`}
-		/>
-		<button class="plain selected deselectable">+</button>
-		<br />
-		<Code
-			content={`<button class="icon_button selected deselectable">
-	+
-</button>`}
-		/>
-		<button class="icon_button selected deselectable">+</button>
-		<br />
-		<Code
-			content={`<button class="plain icon_button selected deselectable">
-	+
-</button>`}
-		/>
-		<button class="plain icon_button selected deselectable">+</button>
-		<br />
-	</section>
-
-	<hr />
-
-	<div class="box prose">
-		<section>
-			<h3>
-				<code>.buttonlike</code> CSS class
-			</h3>
-			<p class="width_sm">
-				the <code>.buttonlike</code> class is useful when you want interactive builtin elements to be
-				wrapped in a larger clickable area:
-			</p>
-		</section>
-		<section class="padded_md panel">
-			<Code content={`<label class="buttonlike">\n\t<input type="checkbox" />...\n</label>`} />
-			<label class="buttonlike padded_md row box">
-				<input type="checkbox" />
-				<div class="padded_sm">this entire thing is buttonlike, not just the checkbox</div>
-			</label>
-		</section>
-		<section class="padded_md panel">
-			<Code content={`<label class="buttonlike disabled">...</label>`} />
-			<label class="buttonlike padded_md row box disabled">
-				<input type="checkbox" disabled />
-				<div class="padded_sm">this is a <code>.disabled</code> buttonlike</div>
-			</label>
-		</section>
-		<section class="padded_md panel">
-			<Code content={`<div class="buttonlike selected padded_md">...</div>`} />
-			<div class="buttonlike selected padded_md">
-				<code>.buttonlike</code> with <code>.selected</code>
-			</div>
-		</section>
-		<section class="padded_md panel">
-			<Code content={`<div class="buttonlike deselectable selected padded_md">...</div>`} />
-			<div class="buttonlike deselectable selected padded_md">
-				<code>.buttonlike</code> with <code>.selected</code> and <code>.deselectable</code>
-			</div>
-		</section>
-		<blockquote>TODO: add more <code>deselectable</code> signifiers?</blockquote>
-	</div>
 </Tome_Detail>
diff --git a/src/routes/library/tomes.ts b/src/routes/library/tomes.ts
index 8bca152bf..ad664d444 100644
--- a/src/routes/library/tomes.ts
+++ b/src/routes/library/tomes.ts
@@ -1,7 +1,8 @@
 import {init_tome, type Tome} from '@fuz.dev/fuz_library/tome.js';
 
-import elements from '$routes/library/elements/+page.svelte';
+import buttons from '$routes/library/buttons/+page.svelte';
 import forms from '$routes/library/forms/+page.svelte';
+import elements from '$routes/library/elements/+page.svelte';
 import typography from '$routes/library/typography/+page.svelte';
 import theme from '$routes/library/theme/+page.svelte';
 import variables from '$routes/library/variables/+page.svelte';
@@ -18,12 +19,12 @@ export const tomes: Tome[] = [
 		related: ['icon sizes', 'typography', 'variables'],
 	},
 	{
-		name: 'elements',
-		slug: 'elements',
+		name: 'buttons',
+		slug: 'buttons',
 		pathname: '',
 		category: 'styles',
-		component: elements,
-		related: ['forms', 'prose'],
+		component: buttons,
+		related: ['forms', 'elements', 'prose'],
 	},
 	{
 		name: 'forms',
@@ -31,7 +32,15 @@ export const tomes: Tome[] = [
 		pathname: '',
 		category: 'styles',
 		component: forms,
-		related: ['elements', 'prose'],
+		related: ['buttons', 'elements', 'prose'],
+	},
+	{
+		name: 'elements',
+		slug: 'elements',
+		pathname: '',
+		category: 'styles',
+		component: elements,
+		related: ['buttons', 'forms', 'prose'],
 	},
 	{
 		name: 'icon sizes',

From cd7c1adb888b82ca84a5f164af03c101b2edcbb2 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 15 Jan 2024 12:20:43 -0700
Subject: [PATCH 05/29] wip

---
 src/lib/style.css | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index 58ea9edd5..99210f3a8 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -469,45 +469,29 @@ label.disabled:active {
 	background: var(--button_bg_disabled);
 }
 
-/* TODO how do we want to do the generic declarations?
-repeat in each? or maybe:
-button.color_1, button.color_1, button.color_1 button.color_1 {
+button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7) {
 	color: var(--lighten_7);
 }
-
-or require a second class to the buttons?
-button.color {
-	color: var(--lighten_7);
-}
-*/
-
 button.color_1 {
 	background-color: var(--color_1);
-	color: var(--lighten_7);
 }
 button.color_2 {
 	background-color: var(--color_2);
-	color: var(--lighten_7);
 }
 button.color_3 {
 	background-color: var(--color_3);
-	color: var(--lighten_7);
 }
 button.color_4 {
 	background-color: var(--color_4);
-	color: var(--lighten_7);
 }
 button.color_5 {
 	background-color: var(--color_5);
-	color: var(--lighten_7);
 }
 button.color_6 {
 	background-color: var(--color_6);
-	color: var(--lighten_7);
 }
 button.color_7 {
 	background-color: var(--color_7);
-	color: var(--lighten_7);
 }
 
 /* TODO could improve this with the coming `:has` selector

From ca361b550224c750eb6a8e7e00ebf17dd9e57dea Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Thu, 15 Feb 2024 22:32:41 -0700
Subject: [PATCH 06/29] wip

---
 package-lock.json | 542 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 542 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index a3c8a0262..cf0f5d416 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -79,6 +79,278 @@
       "integrity": "sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==",
       "dev": true
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/linux-x64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
@@ -96,6 +368,108 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -318,6 +692,118 @@
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
       "dev": true
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.11.0.tgz",
+      "integrity": "sha512-BV+u2QSfK3i1o6FucqJh5IK9cjAU6icjFFhvknzFgu472jzl0bBojfDAkJLBEsHFMo+YZg6rthBvBBt8z12IBQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.11.0.tgz",
+      "integrity": "sha512-0ij3iw7sT5jbcdXofWO2NqDNjSVVsf6itcAkV2I6Xsq4+6wjW1A8rViVB67TfBEan7PV2kbLzT8rhOVWLI2YXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.11.0.tgz",
+      "integrity": "sha512-yPLs6RbbBMupArf6qv1UDk6dzZvlH66z6NLYEwqTU0VHtss1wkI4UYeeMS7TVj5QRVvaNAWYKP0TD/MOeZ76Zg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.11.0.tgz",
+      "integrity": "sha512-OvqIgwaGAwnASzXaZEeoJY3RltOFg+WUbdkdfoluh2iqatd090UeOG3A/h0wNZmE93dDew9tAtXgm3/+U/B6bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.11.0.tgz",
+      "integrity": "sha512-X17s4hZK3QbRmdAuLd2EE+qwwxL8JxyVupEqAkxKPa/IgX49ZO+vf0ka69gIKsaYeo6c1CuwY3k8trfDtZ9dFg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.11.0.tgz",
+      "integrity": "sha512-673Lu9EJwxVB9NfYeA4AdNu0FOHz7g9t6N1DmT7bZPn1u6bTF+oZjj+fuxUcrfxWXE0r2jxl5QYMa9cUOj9NFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.11.0.tgz",
+      "integrity": "sha512-yFW2msTAQNpPJaMmh2NpRalr1KXI7ZUjlN6dY/FhWlOclMrZezm5GIhy3cP4Ts2rIAC+IPLAjNibjp1BsxCVGg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.11.0.tgz",
+      "integrity": "sha512-kKT9XIuhbvYgiA3cPAGntvrBgzhWkGpBMzuk1V12Xuoqg7CI41chye4HU0vLJnGf9MiZzfNh4I7StPeOzOWJfA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.11.0.tgz",
@@ -346,6 +832,48 @@
       ],
       "peer": true
     },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.11.0.tgz",
+      "integrity": "sha512-LVXo9dDTGPr0nezMdqa1hK4JeoMZ02nstUxGYY/sMIDtTYlli1ZxTXBYAz3vzuuvKO4X6NBETciIh7N9+abT1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.11.0.tgz",
+      "integrity": "sha512-xZVt6K70Gr3I7nUhug2dN6VRR1ibot3rXqXS3wo+8JP64t7djc3lBFyqO4GiVrhNaAIhUCJtwQ/20dr0h0thmQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.11.0.tgz",
+      "integrity": "sha512-f3I7h9oTg79UitEco9/2bzwdciYkWr8pITs3meSDSlr1TdvQ7IxkQaaYN2YqZXX5uZhiYL+VuYDmHwNzhx+HOg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
     "node_modules/@ryanatkn/belt": {
       "version": "0.20.3",
       "resolved": "https://registry.npmjs.org/@ryanatkn/belt/-/belt-0.20.3.tgz",
@@ -1598,6 +2126,20 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",

From e35eaf607bba4898f5566d48302ce393d4c7f028 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sat, 17 Feb 2024 18:14:06 -0700
Subject: [PATCH 07/29] wip

---
 src/routes/library/buttons/+page.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/routes/library/buttons/+page.svelte b/src/routes/library/buttons/+page.svelte
index 1f84e3662..9950cb176 100644
--- a/src/routes/library/buttons/+page.svelte
+++ b/src/routes/library/buttons/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import Tome_Detail from '@fuz.dev/fuz_library/Tome_Detail.svelte';
-	import {get_tome} from '@fuz.dev/fuz_library/tome.js';
-	import 'prismjs'; // TODO why are these needed? `Code` imports these already - vite config?
-	import 'prism-svelte';
-	import Code from '@fuz.dev/fuz_code/Code.svelte';
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
 
 	const LIBRARY_ITEM_NAME = 'buttons';
 

From 37fcbcd3957f6546b135d045860884f7d4a32aa3 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sat, 17 Feb 2024 18:33:42 -0700
Subject: [PATCH 08/29] wip

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 14f133f1c..5ced682b5 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,7 @@
 
 > friendly user zystem 🧶 [fuz.dev](https://www.fuz.dev/)
 
-Fuz is a design system for CSS, <a href="https://svelte.dev/">Svelte</a>,
-and <a href="https://kit.svelte.dev/">SvelteKit</a>:
+Fuz is a <a href="https://svelte.dev/">Svelte</a> UI library and CSS design system.
 
 - plain CSS
 - designed around CSS variables

From e0611e03fc816f215ddecdf5f28388389d8d1bec Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 18 Feb 2024 10:36:25 -0700
Subject: [PATCH 09/29] remove drop_shadow_ variables

---
 .changeset/nice-glasses-remember.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nice-glasses-remember.md

diff --git a/.changeset/nice-glasses-remember.md b/.changeset/nice-glasses-remember.md
new file mode 100644
index 000000000..12bc4179c
--- /dev/null
+++ b/.changeset/nice-glasses-remember.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+remove drop_shadow_ variables

From 1265bb82a6ad0b22ac7c10c023f687c9821311b4 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 18 Feb 2024 10:37:20 -0700
Subject: [PATCH 10/29] wip

---
 .changeset/nice-glasses-remember.md |  4 ++--
 src/lib/style.css                   | 14 ++++++++++++++
 src/lib/theme.css                   | 14 ++++++--------
 src/lib/variables.ts                | 25 +++++++++++++++++++------
 4 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/.changeset/nice-glasses-remember.md b/.changeset/nice-glasses-remember.md
index 12bc4179c..c0ab8e99d 100644
--- a/.changeset/nice-glasses-remember.md
+++ b/.changeset/nice-glasses-remember.md
@@ -1,5 +1,5 @@
 ---
-"@ryanatkn/fuz": minor
+'@ryanatkn/fuz': minor
 ---
 
-remove drop_shadow_ variables
+remove `drop_shadow_` variables
diff --git a/src/lib/style.css b/src/lib/style.css
index ad8637857..5e4cee49d 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -469,9 +469,23 @@ label.disabled:active {
 	background: var(--button_bg_disabled);
 }
 
+/* TODO these need design work for visuals/consistency/customizability */
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7) {
 	color: var(--lighten_7);
 }
+/* TODO differences for hover/focus */
+button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):is(:hover, :focus) {
+	color: var(--lighten_9);
+	box-shadow:
+		2px 2px 5px inset var(--lighten_3),
+		-2px -2px 5px inset var(--darken_3);
+}
+button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):active {
+	color: var(--lighten_9);
+	box-shadow:
+		2px 2px 5px inset var(--darken_3),
+		-2px -2px 5px inset var(--lighten_3);
+}
 button.color_1 {
 	background-color: var(--color_1);
 }
diff --git a/src/lib/theme.css b/src/lib/theme.css
index 04817d8b6..03f26a8c1 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -37,7 +37,7 @@
 	--tint_hue: var(--hue_4);
 	--tint_saturation: 11%;
 	--bg: hsl(var(--tint_hue), var(--tint_saturation), 96%);
-	--fg: hsl(var(--tint_hue), var(--tint_saturation), 7%);
+	--fg: hsl(var(--tint_hue), var(--tint_saturation), 6%);
 	--bg_1: var(--lighten_1);
 	--bg_2: var(--lighten_2);
 	--bg_3: var(--lighten_3);
@@ -144,12 +144,10 @@
 	--input_height_inner: calc(
 		var(--input_height) - 2 * var(--border_width) - 2 * var(--input_padding_y)
 	);
-	--box_shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28),
-		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28);
-	--box_shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8),
-		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8);
-	--drop_shadow: drop-shadow(var(--box_shadow));
-	--drop_shadow_lg: drop-shadow(var(--box_shadow_lg));
+	--box_shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28),
+		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28);
+	--box_shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8),
+		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8);
 	--icon_size: var(--icon_size_md);
 	--icon_size_xs: 18px;
 	--icon_size_sm: 32px;
@@ -186,7 +184,7 @@
 	--color_5: hsl(var(--hue_5), 50%, 65%);
 	--color_6: hsl(var(--hue_6), 32%, 75%);
 	--color_7: hsl(var(--hue_7), 74%, 76%);
-	--bg: hsl(var(--tint_hue), var(--tint_saturation), 7%);
+	--bg: hsl(var(--tint_hue), var(--tint_saturation), 6%);
 	--fg: hsl(var(--tint_hue), var(--tint_saturation), 96%);
 	--bg_1: var(--darken_1);
 	--bg_2: var(--darken_2);
diff --git a/src/lib/variables.ts b/src/lib/variables.ts
index 00f680d1b..b7f59536e 100644
--- a/src/lib/variables.ts
+++ b/src/lib/variables.ts
@@ -1,5 +1,20 @@
 import type {Theme_Variable} from '$lib/theme.js';
 
+/*
+
+TODO lots of things here to address:
+
+- lots of inconsistencies, like the relationship between base and modified values
+	- in some cases the base value is just a value, in other cases it's the "current" value
+- going from `_lg` to `_1` is awkward - maybe replace all xs/sm/md/lg with 1/2/3/4
+	- issues with this:
+		- less semantically meaningful, harder to read/write so you'll have to learn the system
+			- 3 won't always be "medium" for each usage because of the lower end values
+		- changing the bottom end of the range will cause bad churn (can't just add a new `_xs4`)
+		- numbers will get into the double digits
+
+/*
+
 /**
  * These are implicitly the variables for the `base` theme.
  * See also the empty `variables` array of the `base` theme above.
@@ -80,11 +95,11 @@ export const default_variables: Theme_Variable[] = [
 	{
 		name: 'bg',
 		light: 'hsl(var(--tint_hue), var(--tint_saturation), 96%)',
-		dark: 'hsl(var(--tint_hue), var(--tint_saturation), 7%)',
+		dark: 'hsl(var(--tint_hue), var(--tint_saturation), 6%)',
 	},
 	{
 		name: 'fg',
-		light: 'hsl(var(--tint_hue), var(--tint_saturation), 7%)',
+		light: 'hsl(var(--tint_hue), var(--tint_saturation), 6%)',
 		dark: 'hsl(var(--tint_hue), var(--tint_saturation), 96%)',
 	},
 	/* these are light or dark with a low alpha, so they nest/stack arbitrarily */
@@ -261,17 +276,15 @@ export const default_variables: Theme_Variable[] = [
 	{
 		name: 'box_shadow',
 		light:
-			'2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28)',
+			'2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28)',
 		dark: '2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5))',
 	},
 	{
 		name: 'box_shadow_lg',
 		light:
-			'2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8)',
+			'2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8)',
 		dark: '2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5))',
 	},
-	{name: 'drop_shadow', light: 'drop-shadow(var(--box_shadow))'},
-	{name: 'drop_shadow_lg', light: 'drop-shadow(var(--box_shadow_lg))'},
 
 	/* icons */
 	/* these decrease by the golden ratio, rounded to the nearest pixel,

From 54246187c64f52dc7c6bd722b17ddbd264991234 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 18 Feb 2024 10:39:03 -0700
Subject: [PATCH 11/29] wip

---
 .changeset/nice-glasses-remember.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.changeset/nice-glasses-remember.md b/.changeset/nice-glasses-remember.md
index c0ab8e99d..ded52c8e5 100644
--- a/.changeset/nice-glasses-remember.md
+++ b/.changeset/nice-glasses-remember.md
@@ -2,4 +2,5 @@
 '@ryanatkn/fuz': minor
 ---
 
-remove `drop_shadow_` variables
+remove `drop_shadow` and `drop_shadow_lg` variables and
+rename `box_shadow`/`box_shadow_lg` to `shadow`/`shadow_lg`

From 5d5fd3d3b323f301d6f6c49aeb3f24c1eab2b961 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 18 Feb 2024 10:44:20 -0700
Subject: [PATCH 12/29] wip

---
 CHANGELOG.md          | 6 +++---
 src/lib/Dialog.svelte | 2 +-
 src/lib/style.css     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3c0a6938..c4d71536e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -425,8 +425,8 @@
   - remove `.plain-button`, use `.plain` on `button` instead
   - rename `.w-full` to `.width_full` and `.h-full` to `.height_full`
   - snake_case `.padded-X` to `.padded_X` and `.icon-button` to `.icon_button`
-  - rename `--box_shadow_dark` and `--drop_shadow_dark` to `--box_shadow_lg`
-    and `--drop_shadow_lg`
+  - rename `--box_shadow_dark` and `--shadow_dark` to `--box_shadow_lg`
+    and `--shadow_lg`
   - drop the `font_` from `--font_size_X` (later changed to `size_`, see below)
   - rename `.column` to `.width_md` and `.column-sm` to `.width_sm`
   - rename `--column_width` to `--width_md` and `--column_width_sm` to `--width_sm`
@@ -940,7 +940,7 @@
   ([#159](https://github.com/ryanatkn/fuz/pull/159))
 - **break**: remove opinionated layout CSS on the `html` and `body` elements
   ([#155](https://github.com/ryanatkn/fuz/pull/155))
-- **break**: replace `--pane_box_shadow` with `--drop_shadow` and `--drop_shadow_dark`
+- **break**: replace `--pane_box_shadow` with `--shadow` and `--shadow_dark`
   ([#161](https://github.com/ryanatkn/fuz/pull/161))
 - add CSS variables `--transition_duration_1` to `--transition_duration_5`
   that get disabled with `prefers-reduced-motion`
diff --git a/src/lib/Dialog.svelte b/src/lib/Dialog.svelte
index 991cd9b78..8dde8838f 100644
--- a/src/lib/Dialog.svelte
+++ b/src/lib/Dialog.svelte
@@ -152,7 +152,7 @@
 
 <style>
 	.dialog {
-		--drop_shadow: var(--drop_shadow_lg);
+		--shadow: var(--shadow_lg);
 		overflow: auto;
 		position: fixed;
 		inset: 0;
diff --git a/src/lib/style.css b/src/lib/style.css
index 5e4cee49d..90540b3ea 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -615,8 +615,8 @@ ahead are utility and helper classes:
 By default it's opaque, resetting the background to the initial depth. */
 .pane {
 	background-color: var(--pane_bg, var(--bg));
-	/* TODO this causes blurriness with nested contextmenus, maybe they shouldn't be panes? is pane overloaded? maybe extract the bg part of it?
-	filter: var(--drop_shadow); */
+	/* TODO this is preferred but causes blurriness with nested contextmenus, maybe they shouldn't be panes? is pane overloaded? maybe extract the bg part of it?
+	filter: drop-shadow(var(--shadow)); */
 	box-shadow: var(--box_shadow);
 	border-radius: var(--border_radius_xs);
 }

From 0e30d5e1f3d9e3fc46c73a1875e3d4e1eff8c54b Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 18 Feb 2024 10:44:52 -0700
Subject: [PATCH 13/29] wip

---
 CHANGELOG.md         | 10 +++++-----
 src/lib/style.css    |  2 +-
 src/lib/theme.css    |  8 ++++----
 src/lib/variables.ts |  4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4d71536e..60b4dbf9d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -425,7 +425,7 @@
   - remove `.plain-button`, use `.plain` on `button` instead
   - rename `.w-full` to `.width_full` and `.h-full` to `.height_full`
   - snake_case `.padded-X` to `.padded_X` and `.icon-button` to `.icon_button`
-  - rename `--box_shadow_dark` and `--shadow_dark` to `--box_shadow_lg`
+  - rename `--shadow_dark` and `--shadow_dark` to `--shadow_lg`
     and `--shadow_lg`
   - drop the `font_` from `--font_size_X` (later changed to `size_`, see below)
   - rename `.column` to `.width_md` and `.column-sm` to `.width_sm`
@@ -714,11 +714,11 @@
   - remove `--interactive_color_active_dark`
   - remove `--avatar_height`
   - remove `--border_radius_N` for variants `md`/`sm`/`xs`
-  - remove `--input_box_shadow_` variables
+  - remove `--input_shadow_` variables
   - remove `--panel_color` and `--panel_color_dark`
   - remove `.panel-outset` and `.panel-inset` - use `.panel` instead
-  - remove `--panel_inset_box_shadow`, `--panel_outset_box_shadow`,
-    `--panel_inset_box_shadow_hover` and `--panel_outset_box_shadow_hover`
+  - remove `--panel_inset_shadow`, `--panel_outset_shadow`,
+    `--panel_inset_shadow_hover` and `--panel_outset_shadow_hover`
   - remove `--panel_padding`, `--panel_padding_sm`, and `--panel_padding_xs` -- use `--padded_X` instead
   - add utility classes `.centered-text`, `.padded-xs`, `.padded-sm`, and `.padded-lg`
   - add `--border_width`
@@ -940,7 +940,7 @@
   ([#159](https://github.com/ryanatkn/fuz/pull/159))
 - **break**: remove opinionated layout CSS on the `html` and `body` elements
   ([#155](https://github.com/ryanatkn/fuz/pull/155))
-- **break**: replace `--pane_box_shadow` with `--shadow` and `--shadow_dark`
+- **break**: replace `--pane_shadow` with `--shadow` and `--shadow_dark`
   ([#161](https://github.com/ryanatkn/fuz/pull/161))
 - add CSS variables `--transition_duration_1` to `--transition_duration_5`
   that get disabled with `prefers-reduced-motion`
diff --git a/src/lib/style.css b/src/lib/style.css
index 90540b3ea..0d46bbd5e 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -617,7 +617,7 @@ By default it's opaque, resetting the background to the initial depth. */
 	background-color: var(--pane_bg, var(--bg));
 	/* TODO this is preferred but causes blurriness with nested contextmenus, maybe they shouldn't be panes? is pane overloaded? maybe extract the bg part of it?
 	filter: drop-shadow(var(--shadow)); */
-	box-shadow: var(--box_shadow);
+	box-shadow: var(--shadow);
 	border-radius: var(--border_radius_xs);
 }
 /* A panel is a box embedded into the page, useful for visually isolating content. */
diff --git a/src/lib/theme.css b/src/lib/theme.css
index 03f26a8c1..a43d4e646 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -144,9 +144,9 @@
 	--input_height_inner: calc(
 		var(--input_height) - 2 * var(--border_width) - 2 * var(--input_padding_y)
 	);
-	--box_shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28),
+	--shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28),
 		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28);
-	--box_shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8),
+	--shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8),
 		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8);
 	--icon_size: var(--icon_size_md);
 	--icon_size_xs: 18px;
@@ -214,9 +214,9 @@
 	--border_3: hsl(var(--tint_hue), 60%, 80%, 50%);
 	--border_4: hsl(var(--tint_hue), 60%, 80%, 40%);
 	--border_5: hsl(var(--tint_hue), 60%, 80%, 30%);
-	--box_shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
+	--shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
 		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5));
-	--box_shadow_lg: 2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
+	--shadow_lg: 2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
 		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5));
 }
 
diff --git a/src/lib/variables.ts b/src/lib/variables.ts
index b7f59536e..353aaaae1 100644
--- a/src/lib/variables.ts
+++ b/src/lib/variables.ts
@@ -274,13 +274,13 @@ export const default_variables: Theme_Variable[] = [
 
 	/* shadows */
 	{
-		name: 'box_shadow',
+		name: 'shadow',
 		light:
 			'2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28)',
 		dark: '2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5))',
 	},
 	{
-		name: 'box_shadow_lg',
+		name: 'shadow_lg',
 		light:
 			'2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8)',
 		dark: '2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5))',

From 3aa90e0cfcb23b2141969c7860056018e6db337a Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 18 Feb 2024 10:54:58 -0700
Subject: [PATCH 14/29] wip

---
 src/lib/style.css    |  8 ++------
 src/lib/theme.css    |  2 ++
 src/lib/variables.ts | 12 ++++++++++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index 0d46bbd5e..f65df5cf9 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -476,15 +476,11 @@ button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7)
 /* TODO differences for hover/focus */
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):is(:hover, :focus) {
 	color: var(--lighten_9);
-	box-shadow:
-		2px 2px 5px inset var(--lighten_3),
-		-2px -2px 5px inset var(--darken_3);
+	box-shadow: var(--shadow_inset);
 }
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):active {
 	color: var(--lighten_9);
-	box-shadow:
-		2px 2px 5px inset var(--darken_3),
-		-2px -2px 5px inset var(--lighten_3);
+	box-shadow: var(--shadow_inset_active);
 }
 button.color_1 {
 	background-color: var(--color_1);
diff --git a/src/lib/theme.css b/src/lib/theme.css
index a43d4e646..796a7e3a2 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -148,6 +148,8 @@
 		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28);
 	--shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8),
 		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8);
+	--shadow_inset: 2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2);
+	--shadow_inset_active: 2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2);
 	--icon_size: var(--icon_size_md);
 	--icon_size_xs: 18px;
 	--icon_size_sm: 32px;
diff --git a/src/lib/variables.ts b/src/lib/variables.ts
index 353aaaae1..c59c730e1 100644
--- a/src/lib/variables.ts
+++ b/src/lib/variables.ts
@@ -273,6 +273,10 @@ export const default_variables: Theme_Variable[] = [
 	},
 
 	/* shadows */
+	// TODO these shouldn't use tint, use lighten/darken instead,
+	// but ideally we'd have a blend mode make the colors right,
+	// which would require a pseduo-element,
+	// but that's heavier and requires the element to be positioned (I think?)
 	{
 		name: 'shadow',
 		light:
@@ -285,6 +289,14 @@ export const default_variables: Theme_Variable[] = [
 			'2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8)',
 		dark: '2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5))',
 	},
+	{
+		name: 'shadow_inset',
+		light: '2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2)',
+	},
+	{
+		name: 'shadow_inset_active', // TODO better name? this is the "pressed" version for buttons
+		light: '2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2)',
+	},
 
 	/* icons */
 	/* these decrease by the golden ratio, rounded to the nearest pixel,

From f9923f95edac6b0acee1b09993ffb12a62bb67c5 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 18 Feb 2024 11:03:22 -0700
Subject: [PATCH 15/29] wip

---
 src/lib/style.css                       | 42 ++++++++++++++++++++-----
 src/routes/library/buttons/+page.svelte | 10 ++++++
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index f65df5cf9..71cf5117e 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -482,27 +482,55 @@ button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):
 	color: var(--lighten_9);
 	box-shadow: var(--shadow_inset_active);
 }
-button.color_1 {
+button.color_1:not(.outlined) {
 	background-color: var(--color_1);
 }
-button.color_2 {
+button.color_2:not(.outlined) {
 	background-color: var(--color_2);
 }
-button.color_3 {
+button.color_3:not(.outlined) {
 	background-color: var(--color_3);
 }
-button.color_4 {
+button.color_4:not(.outlined) {
 	background-color: var(--color_4);
 }
-button.color_5 {
+button.color_5:not(.outlined) {
 	background-color: var(--color_5);
 }
-button.color_6 {
+button.color_6:not(.outlined) {
 	background-color: var(--color_6);
 }
-button.color_7 {
+button.color_7:not(.outlined) {
 	background-color: var(--color_7);
 }
+button.outlined.color_1 {
+	color: var(--color_1);
+	border-color: var(--color_1);
+}
+button.outlined.color_2 {
+	color: var(--color_2);
+	border-color: var(--color_2);
+}
+button.outlined.color_3 {
+	color: var(--color_3);
+	border-color: var(--color_3);
+}
+button.outlined.color_4 {
+	color: var(--color_4);
+	border-color: var(--color_4);
+}
+button.outlined.color_5 {
+	color: var(--color_5);
+	border-color: var(--color_5);
+}
+button.outlined.color_6 {
+	color: var(--color_6);
+	border-color: var(--color_6);
+}
+button.outlined.color_7 {
+	color: var(--color_7);
+	border-color: var(--color_7);
+}
 
 /* TODO could improve this with the coming `:has` selector
 for disabled colors without needing a wrapper .disabled class */
diff --git a/src/routes/library/buttons/+page.svelte b/src/routes/library/buttons/+page.svelte
index 9950cb176..56b0386ab 100644
--- a/src/routes/library/buttons/+page.svelte
+++ b/src/routes/library/buttons/+page.svelte
@@ -23,6 +23,16 @@
 		<br />
 	{/each}
 
+	<br />
+	<h4><code>.outlined</code> variants</h4>
+	<br />
+
+	{#each {length: 7} as _, i}
+		<Code content={`<button class="color_${i + 1} outlined">`} />
+		<button class="color_{i + 1} outlined">.color_{i + 1}</button>
+		<br />
+	{/each}
+
 	<hr />
 
 	<div class="box prose">

From bb58abcdac0c035da2532028770d6611b819107d Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 08:05:29 -0700
Subject: [PATCH 16/29] wip

---
 src/lib/style.css    | 6 +++---
 src/lib/theme.css    | 6 ++++--
 src/lib/variables.ts | 6 ++++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index 71cf5117e..c9a12d3d3 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -471,15 +471,15 @@ label.disabled:active {
 
 /* TODO these need design work for visuals/consistency/customizability */
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7) {
-	color: var(--lighten_7);
+	color: var(--bg_7);
 }
 /* TODO differences for hover/focus */
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):is(:hover, :focus) {
-	color: var(--lighten_9);
+	color: var(--bg_9);
 	box-shadow: var(--shadow_inset);
 }
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):active {
-	color: var(--lighten_9);
+	color: var(--bg_9);
 	box-shadow: var(--shadow_inset_active);
 }
 button.color_1:not(.outlined) {
diff --git a/src/lib/theme.css b/src/lib/theme.css
index 796a7e3a2..c18180e0c 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -148,8 +148,10 @@
 		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28);
 	--shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8),
 		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8);
-	--shadow_inset: 2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2);
-	--shadow_inset_active: 2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2);
+	--shadow_inset: 2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2),
+		4px 4px 6px inset var(--lighten_1), -4px -4px 6px inset var(--darken_1);
+	--shadow_inset_active: 2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2),
+		4px 4px 6px inset var(--darken_1), -4px -4px 6px inset var(--lighten_1);
 	--icon_size: var(--icon_size_md);
 	--icon_size_xs: 18px;
 	--icon_size_sm: 32px;
diff --git a/src/lib/variables.ts b/src/lib/variables.ts
index c59c730e1..ab45380f1 100644
--- a/src/lib/variables.ts
+++ b/src/lib/variables.ts
@@ -291,11 +291,13 @@ export const default_variables: Theme_Variable[] = [
 	},
 	{
 		name: 'shadow_inset',
-		light: '2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2)',
+		light:
+			'2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2), 4px 4px 6px inset var(--lighten_1), -4px -4px 6px inset var(--darken_1)',
 	},
 	{
 		name: 'shadow_inset_active', // TODO better name? this is the "pressed" version for buttons
-		light: '2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2)',
+		light:
+			'2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2), 4px 4px 6px inset var(--darken_1), -4px -4px 6px inset var(--lighten_1)',
 	},
 
 	/* icons */

From 7f02406ccd51a6ff99b041368ef16dc8960c786d Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 09:33:26 -0700
Subject: [PATCH 17/29] wip

---
 src/lib/style.css                       | 33 +++++++++++++------------
 src/lib/theme.css                       |  4 +++
 src/lib/variables.ts                    |  4 ++-
 src/routes/library/buttons/+page.svelte | 20 +++++++--------
 4 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index c9a12d3d3..eeb798a80 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -475,59 +475,60 @@ button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7)
 }
 /* TODO differences for hover/focus */
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):is(:hover, :focus) {
-	color: var(--bg_9);
+	color: var(--bg_10);
 	box-shadow: var(--shadow_inset);
 }
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):active {
-	color: var(--bg_9);
+	color: var(--bg_10);
 	box-shadow: var(--shadow_inset_active);
 }
-button.color_1:not(.outlined) {
+button.color_1:not(.selected) {
 	background-color: var(--color_1);
 }
-button.color_2:not(.outlined) {
+button.color_2:not(.selected) {
 	background-color: var(--color_2);
 }
-button.color_3:not(.outlined) {
+button.color_3:not(.selected) {
 	background-color: var(--color_3);
 }
-button.color_4:not(.outlined) {
+button.color_4:not(.selected) {
 	background-color: var(--color_4);
 }
-button.color_5:not(.outlined) {
+button.color_5:not(.selected) {
 	background-color: var(--color_5);
 }
-button.color_6:not(.outlined) {
+button.color_6:not(.selected) {
 	background-color: var(--color_6);
 }
-button.color_7:not(.outlined) {
+button.color_7:not(.selected) {
 	background-color: var(--color_7);
 }
-button.outlined.color_1 {
+button.selected.color_1 {
 	color: var(--color_1);
 	border-color: var(--color_1);
+	border-width: var(--border_width_2);
 }
-button.outlined.color_2 {
+button.selected.color_2 {
 	color: var(--color_2);
 	border-color: var(--color_2);
 }
-button.outlined.color_3 {
+button.selected.color_3 {
 	color: var(--color_3);
 	border-color: var(--color_3);
 }
-button.outlined.color_4 {
+button.selected.color_4 {
 	color: var(--color_4);
 	border-color: var(--color_4);
 }
-button.outlined.color_5 {
+button.selected.color_5 {
 	color: var(--color_5);
 	border-color: var(--color_5);
 }
-button.outlined.color_6 {
+button.selected.color_6 {
 	color: var(--color_6);
 	border-color: var(--color_6);
 }
-button.outlined.color_7 {
+button.selected.color_7 {
 	color: var(--color_7);
 	border-color: var(--color_7);
 }
diff --git a/src/lib/theme.css b/src/lib/theme.css
index c18180e0c..ab9c3167b 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -47,6 +47,7 @@
 	--bg_7: var(--lighten_7);
 	--bg_8: var(--lighten_8);
 	--bg_9: var(--lighten_9);
+	--bg_10: #fff;
 	--fg_1: var(--darken_1);
 	--fg_2: var(--darken_2);
 	--fg_3: var(--darken_3);
@@ -56,6 +57,7 @@
 	--fg_7: var(--darken_7);
 	--fg_8: var(--darken_8);
 	--fg_9: var(--darken_9);
+	--fg_10: #000;
 	--text_color: var(--text_1);
 	--text_1: hsl(var(--tint_hue), var(--tint_saturation), 16%);
 	--text_2: hsl(var(--tint_hue), var(--tint_saturation), 32%);
@@ -199,6 +201,7 @@
 	--bg_7: var(--darken_7);
 	--bg_8: var(--darken_8);
 	--bg_9: var(--darken_9);
+	--bg_10: #000;
 	--fg_1: var(--lighten_1);
 	--fg_2: var(--lighten_2);
 	--fg_3: var(--lighten_3);
@@ -208,6 +211,7 @@
 	--fg_7: var(--lighten_7);
 	--fg_8: var(--lighten_8);
 	--fg_9: var(--lighten_9);
+	--fg_10: #fff;
 	--text_1: hsl(var(--tint_hue), var(--tint_saturation), 80%);
 	--text_2: hsl(var(--tint_hue), var(--tint_saturation), 65%);
 	--text_3: hsl(var(--tint_hue), var(--tint_saturation), 50%);
diff --git a/src/lib/variables.ts b/src/lib/variables.ts
index ab45380f1..81acd3e66 100644
--- a/src/lib/variables.ts
+++ b/src/lib/variables.ts
@@ -103,7 +103,7 @@ export const default_variables: Theme_Variable[] = [
 		dark: 'hsl(var(--tint_hue), var(--tint_saturation), 96%)',
 	},
 	/* these are light or dark with a low alpha, so they nest/stack arbitrarily */
-	/* TODO maybe extract --bg_lightness and --fg_lightness */
+	// TODO these inconsistently don't use tint, unlike bg/fg
 	{name: 'bg_1', light: 'var(--lighten_1)', dark: 'var(--darken_1)'},
 	{name: 'bg_2', light: 'var(--lighten_2)', dark: 'var(--darken_2)'},
 	{name: 'bg_3', light: 'var(--lighten_3)', dark: 'var(--darken_3)'},
@@ -113,6 +113,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'bg_7', light: 'var(--lighten_7)', dark: 'var(--darken_7)'},
 	{name: 'bg_8', light: 'var(--lighten_8)', dark: 'var(--darken_8)'},
 	{name: 'bg_9', light: 'var(--lighten_9)', dark: 'var(--darken_9)'},
+	{name: 'bg_10', light: '#fff', dark: '#000'},
 	{name: 'fg_1', light: 'var(--darken_1)', dark: 'var(--lighten_1)'},
 	{name: 'fg_2', light: 'var(--darken_2)', dark: 'var(--lighten_2)'},
 	{name: 'fg_3', light: 'var(--darken_3)', dark: 'var(--lighten_3)'},
@@ -122,6 +123,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'fg_7', light: 'var(--darken_7)', dark: 'var(--lighten_7)'},
 	{name: 'fg_8', light: 'var(--darken_8)', dark: 'var(--lighten_8)'},
 	{name: 'fg_9', light: 'var(--darken_9)', dark: 'var(--lighten_9)'},
+	{name: 'fg_10', light: '#000', dark: '#fff'},
 	/* text colors don't use alpha because it affects performance too much */
 	{name: 'text_color', light: 'var(--text_1)'},
 	{
diff --git a/src/routes/library/buttons/+page.svelte b/src/routes/library/buttons/+page.svelte
index 56b0386ab..6cef672f3 100644
--- a/src/routes/library/buttons/+page.svelte
+++ b/src/routes/library/buttons/+page.svelte
@@ -10,6 +10,8 @@
 
 	let selected_button = 1;
 	let selected_deselectable_button = true;
+
+	// TODO probably want to put the buttons in a more consistent format so we can include `disabled` versions of each in a condensed format
 </script>
 
 <Tome_Detail {tome}>
@@ -20,16 +22,14 @@
 	{#each {length: 7} as _, i}
 		<Code content={`<button class="color_${i + 1}">`} />
 		<button class="color_{i + 1}">.color_{i + 1}</button>
-		<br />
-	{/each}
-
-	<br />
-	<h4><code>.outlined</code> variants</h4>
-	<br />
-
-	{#each {length: 7} as _, i}
-		<Code content={`<button class="color_${i + 1} outlined">`} />
-		<button class="color_{i + 1} outlined">.color_{i + 1}</button>
+		<button class="color_{i + 1}" disabled>disabled .color_{i + 1}</button>
+		<button class="color_{i + 1} selected">.color_{i + 1}.selected</button>
+		<button class="color_{i + 1} selected" disabled>disabled .color_{i + 1}.selected</button>
+		<button class="color_{i + 1} selected deselectable">.color_{i + 1}.selected.deselectable</button
+		>
+		<button class="color_{i + 1} selected deselectable" disabled
+			>disabled .color_{i + 1}.selected.deselectable</button
+		>
 		<br />
 	{/each}
 

From 929cc727e142a1af1c95908e90e48ba64851bd9f Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 09:45:12 -0700
Subject: [PATCH 18/29] wip

---
 src/lib/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index eeb798a80..ce6df5518 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -506,7 +506,6 @@ button.color_7:not(.selected) {
 button.selected.color_1 {
 	color: var(--color_1);
 	border-color: var(--color_1);
-	border-width: var(--border_width_2);
 }
 button.selected.color_2 {
 	color: var(--color_2);

From 442d31f67960226023b9369d651b1f2f93fa9f4c Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 09:49:35 -0700
Subject: [PATCH 19/29] wip

---
 src/lib/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/style.css b/src/lib/style.css
index ce6df5518..428169d29 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -737,6 +737,9 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
 	background-color: var(--button_bg_hover);
 	border-color: var(--border_2);
 }
+/* TODO some inconsistencies here where `.selectable` isn't used in each selector to catch buttons,
+maybe combine these styles with the buttons or scope just to `.selectable`?
+or remove the `.selectable`. from `.selectable.selected`? */
 .selectable.selected,
 .selectable:active {
 	background-color: var(--button_bg_active);

From d4328a30bf18e38f2d96c990d9bf938132d03ccf Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 09:51:43 -0700
Subject: [PATCH 20/29] wip

---
 src/lib/theme.css    | 2 +-
 src/lib/variables.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/theme.css b/src/lib/theme.css
index ab9c3167b..67879a3fd 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -175,7 +175,7 @@
 	--faded_4: 24%;
 	--faded_5: 15%;
 	--faded_6: 9%;
-	--disabled_opacity: var(--faded_1);
+	--disabled_opacity: var(--faded_2);
 	--border_radius: var(--border_radius_md);
 	--border_radius_md: calc(var(--input_height) / 2);
 	--border_radius_sm: calc(var(--border_radius_md) / 1.618);
diff --git a/src/lib/variables.ts b/src/lib/variables.ts
index 81acd3e66..2c2beb75a 100644
--- a/src/lib/variables.ts
+++ b/src/lib/variables.ts
@@ -331,7 +331,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'faded_4', light: '24%'},
 	{name: 'faded_5', light: '15%'},
 	{name: 'faded_6', light: '9%'},
-	{name: 'disabled_opacity', light: 'var(--faded_1)'},
+	{name: 'disabled_opacity', light: 'var(--faded_2)'},
 
 	/* border radii */
 	{name: 'border_radius', light: 'var(--border_radius_md)'},

From 2d3dfd359a869328862fd075f7ee8caf592dc72f Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 14:06:06 -0700
Subject: [PATCH 21/29] wip

---
 README.md                                     | 17 ++++-
 src/lib/Library_Panel.svelte                  |  2 +-
 src/routes/library/+layout.svelte             |  4 +-
 src/routes/library/Breadcrumb/+page.svelte    | 12 +---
 src/routes/library/Card/+page.svelte          | 12 +---
 src/routes/library/Contextmenu/+page.svelte   |  1 -
 src/routes/library/Dialog/+page.svelte        |  2 +-
 .../library/Pending_Animation/+page.svelte    |  9 +--
 .../library/Pending_Button/+page.svelte       |  4 +-
 src/routes/library/Redirect/+page.svelte      | 12 +---
 src/routes/library/Style_Examples.svelte      |  4 +-
 src/routes/library/elements/+page.svelte      | 62 ++++++++-----------
 src/routes/library/prose/+page.svelte         | 22 ++++---
 src/routes/library/theme/+page.svelte         |  8 +--
 src/routes/library/variables/+page.svelte     |  2 +-
 svelte.config.js                              |  4 +-
 16 files changed, 76 insertions(+), 101 deletions(-)

diff --git a/README.md b/README.md
index 5ced682b5..96f223c2c 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,13 @@
 
 Fuz is a <a href="https://svelte.dev/">Svelte</a> UI library and CSS design system.
 
+The CSS design system:
+
 - plain CSS
-- designed around CSS variables
+- designed around CSS variables (includes optional utility and semantic classes,
+  but the base abstraction is implemented with
+  [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) not classes)
+- is the only required part of the library, everything else can be used a la carte
 - supports [`color-scheme` and custom themes](https://www.fuz.dev/library/theme)
   (including dark mode)
 - no dependencies except for `svelte`
@@ -15,6 +20,16 @@ Fuz is a <a href="https://svelte.dev/">Svelte</a> UI library and CSS design syst
   currently includes a single global importable `style.css`,
   see [this issue about optimization](https://github.com/ryanatkn/fuz/issues/277)
 
+The Svelte components and helpers:
+
+- pending migration to Svelte 5
+- builds on the CSS design system
+- plain CSS
+- not a fully-featured
+- minimal abstraction
+- should be easy to copy/paste into your projects when you need full control like
+  [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte)
+
 ## usage
 
 ```bash
diff --git a/src/lib/Library_Panel.svelte b/src/lib/Library_Panel.svelte
index 95075e4b4..f48ef9a7e 100644
--- a/src/lib/Library_Panel.svelte
+++ b/src/lib/Library_Panel.svelte
@@ -7,7 +7,7 @@
 		overflow: hidden;
 		width: 100%;
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		justify-content: center;
 		flex-direction: column;
 		padding: var(--library_panel_padding, var(--spacing_lg));
diff --git a/src/routes/library/+layout.svelte b/src/routes/library/+layout.svelte
index 1045ed797..52d8ced92 100644
--- a/src/routes/library/+layout.svelte
+++ b/src/routes/library/+layout.svelte
@@ -35,7 +35,9 @@
 			</div>
 		</div>
 		<Library_Panel>
-			<Package_Summary {pkg} />
+			<div class="box width_full">
+				<Package_Summary {pkg} />
+			</div>
 		</Library_Panel>
 		<slot />
 		<section class="box">
diff --git a/src/routes/library/Breadcrumb/+page.svelte b/src/routes/library/Breadcrumb/+page.svelte
index a4d2f6747..07952ccfc 100644
--- a/src/routes/library/Breadcrumb/+page.svelte
+++ b/src/routes/library/Breadcrumb/+page.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<div class="prose box">
+	<div class="prose">
 		<section>
 			<!-- TODO make this a generic data-driven helper -->
 			<Code content={`import Breadcrumb from\n\t'@ryanatkn/fuz/Breadcrumb.svelte';`} lang="ts" />
@@ -30,13 +30,3 @@
 		</section>
 	</div>
 </Tome_Detail>
-
-<style>
-	section {
-		/* TODO not sure about this -- maybe make it a util class? or a component? */
-		padding: var(--spacing_2);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-</style>
diff --git a/src/routes/library/Card/+page.svelte b/src/routes/library/Card/+page.svelte
index 245a2b6c4..02b202fc1 100644
--- a/src/routes/library/Card/+page.svelte
+++ b/src/routes/library/Card/+page.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<div class="prose box">
+	<div class="prose">
 		<section>
 			<!-- TODO make this a generic data-driven helper -->
 			<Code content={`import Card from\n\t'@ryanatkn/fuz/Card.svelte';`} lang="ts" />
@@ -116,13 +116,3 @@
 		</section>
 	</div>
 </Tome_Detail>
-
-<style>
-	section {
-		/* TODO not sure about this -- maybe make it a util class? or a component? */
-		padding: var(--spacing_2);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-</style>
diff --git a/src/routes/library/Contextmenu/+page.svelte b/src/routes/library/Contextmenu/+page.svelte
index 998ce347c..53267b09e 100644
--- a/src/routes/library/Contextmenu/+page.svelte
+++ b/src/routes/library/Contextmenu/+page.svelte
@@ -143,7 +143,6 @@
 <Tome_Detail {tome} --library_panel_padding="var(--spacing_lg) 0 0 0">
 	<div slot="header"><h2>{tome.name}</h2></div>
 	<div
-		class="width_full box"
 		use:contextmenu.action={[
 			// params type of the action is `Contextmenu_Action_Params`
 			can_reset ? {run: reset, content: 'Reset', icon: '↻'} : null,
diff --git a/src/routes/library/Dialog/+page.svelte b/src/routes/library/Dialog/+page.svelte
index af013792e..380343004 100644
--- a/src/routes/library/Dialog/+page.svelte
+++ b/src/routes/library/Dialog/+page.svelte
@@ -56,7 +56,7 @@
 
 <Tome_Detail {tome}>
 	<div slot="header"><h2>{tome.name}</h2></div>
-	<div class="prose box width_full">
+	<div class="prose width_full">
 		<Code
 			content={`<button on:click={() => (opened = true)}>
 	open a dialog
diff --git a/src/routes/library/Pending_Animation/+page.svelte b/src/routes/library/Pending_Animation/+page.svelte
index 67862c9e2..f5cbf4156 100644
--- a/src/routes/library/Pending_Animation/+page.svelte
+++ b/src/routes/library/Pending_Animation/+page.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<div class="prose box">
+	<div class="prose">
 		<section>
 			<!-- TODO make this a generic data-driven helper -->
 			<Code
@@ -117,13 +117,6 @@
 	code button.inline {
 		margin: 0;
 	}
-	section {
-		/* TODO not sure about this -- maybe make it a util class? or a component? */
-		padding: var(--spacing_2);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
 	.index {
 		font-size: var(--size_3);
 		font-weight: 300;
diff --git a/src/routes/library/Pending_Button/+page.svelte b/src/routes/library/Pending_Button/+page.svelte
index d3348b07c..da11632d1 100644
--- a/src/routes/library/Pending_Button/+page.svelte
+++ b/src/routes/library/Pending_Button/+page.svelte
@@ -17,8 +17,8 @@
 	-->
 
 <Tome_Detail {tome}>
-	<div class="prose box">
-		<section class="box">
+	<div class="prose">
+		<section>
 			<p class="width_sm">Preserves a button's normal width while animating.</p>
 			<aside class="width_sm">
 				<p>This component may be replaced with an action in the future or otherwise change.</p>
diff --git a/src/routes/library/Redirect/+page.svelte b/src/routes/library/Redirect/+page.svelte
index b733edba6..719685fc6 100644
--- a/src/routes/library/Redirect/+page.svelte
+++ b/src/routes/library/Redirect/+page.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<div class="box prose">
+	<div class="prose">
 		<p class="width_sm">
 			Adds a redirect for a page using <a
 				href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#html_redirections"
@@ -48,13 +48,3 @@
 		</section>
 	</div>
 </Tome_Detail>
-
-<style>
-	section {
-		/* TODO make standard across library pages */
-		padding: var(--spacing_2);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-</style>
diff --git a/src/routes/library/Style_Examples.svelte b/src/routes/library/Style_Examples.svelte
index 2f116f605..fd2d24fe7 100644
--- a/src/routes/library/Style_Examples.svelte
+++ b/src/routes/library/Style_Examples.svelte
@@ -152,10 +152,10 @@
 		<input type="checkbox" disabled />
 		<div class="padded_sm">this is a <code>.disabled</code> buttonlike</div>
 	</label>
-	<div class="buttonlike selected padded_md">
+	<div class="buttonlike selected padded_md" tabindex="0" role="button">
 		<code>.buttonlike</code> with <code>.selected</code>
 	</div>
-	<div class="buttonlike deselectable selected padded_md">
+	<div class="buttonlike deselectable selected padded_md" tabindex="0" role="button">
 		<code>.buttonlike</code> with <code>.selected</code> and <code>.deselectable</code>
 	</div>
 </div>
diff --git a/src/routes/library/elements/+page.svelte b/src/routes/library/elements/+page.svelte
index 073ad8d9a..a1b0a7b43 100644
--- a/src/routes/library/elements/+page.svelte
+++ b/src/routes/library/elements/+page.svelte
@@ -9,8 +9,8 @@
 </script>
 
 <Tome_Detail {tome}>
-	<div class="prose box">
-		<blockquote class="text_align_center">
+	<div class="prose">
+		<blockquote>
 			styles for miscellaneous <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element"
 				>HTML elements</a
 			>
@@ -30,17 +30,15 @@
 	</div>
 	<hr />
 	<div class="prose">
-		<div class="box">
-			<h3>
-				<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"
-					><code>details</code></a
-				>
-				and
-				<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"
-					><code>summary</code></a
-				>
-			</h3>
-		</div>
+		<h3>
+			<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"
+				><code>details</code></a
+			>
+			and
+			<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"
+				><code>summary</code></a
+			>
+		</h3>
 		<details>
 			<summary
 				>Click me, a <code>summary</code>, to see the rest of the <code>details</code></summary
@@ -58,18 +56,15 @@
 		</details>
 	</div>
 	<hr />
-	<div class="prose box">
-		<div class="box">
-			<h3>
-				<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table"
-					><code>table</code></a
-				>
-			</h3>
-			<blockquote>this is unfinished and will change</blockquote>
-		</div>
-		<div class="box">
-			<Code
-				content={`<table>
+	<div class="prose">
+		<h3>
+			<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table"
+				><code>table</code></a
+			>
+		</h3>
+		<blockquote>this is unfinished and will change</blockquote>
+		<Code
+			content={`<table>
 	<thead>
 		<th>th</th>
 		<th>th</th>
@@ -81,8 +76,7 @@
 		<tr><td>td</td><td>td</td><td>td</td></tr>
 	</tbody>
 </table>`}
-			/>
-		</div>
+		/>
 		<table>
 			<thead>
 				<th>th</th>
@@ -111,17 +105,15 @@
 	</div>
 	<hr />
 	<div class="prose">
-		<div class="box">
-			<h3>
-				<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"
-					><code>aside</code></a
-				>
-			</h3>
-		</div>
+		<h3>
+			<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"
+				><code>aside</code></a
+			>
+		</h3>
 		<aside>
 			the <code>aside</code> looks like this
 		</aside>
-		<aside class="box">
+		<aside>
 			<Code
 				content={`<aside>
 	<aside>
diff --git a/src/routes/library/prose/+page.svelte b/src/routes/library/prose/+page.svelte
index dc8fb0efe..a342274c6 100644
--- a/src/routes/library/prose/+page.svelte
+++ b/src/routes/library/prose/+page.svelte
@@ -8,13 +8,15 @@
 </script>
 
 <Tome_Detail {tome}>
-	<section class="width_sm text_align_center">
+	<section class="width_sm">
 		<blockquote>
-			the <code>.prose</code> CSS class styles HTML elements for document-like presentation
+			The <code>.prose</code> CSS class styles HTML elements for document-like presentation. The
+			base Fuz stylesheet resets everything for app-like presentation (e.g. no margin/padding), and
+			<code>.prose</code> adds good defaults back.
 		</blockquote>
 	</section>
 	<div class="prose">
-		<section class="text_align_center">
+		<section>
 			<h3><code>ul</code> inside <code>.prose</code></h3>
 		</section>
 	</div>
@@ -26,7 +28,7 @@
 		</ul>
 	</section>
 	<div class="prose">
-		<section class="text_align_center">
+		<section>
 			<h3><code>ul</code> without a <code>.prose</code> ancestor</h3>
 		</section>
 	</div>
@@ -38,7 +40,7 @@
 		</ul>
 	</section>
 	<div class="prose">
-		<section class="text_align_center">
+		<section>
 			<h3><code>a</code> links are inline inside <code>.prose</code></h3>
 		</section>
 	</div>
@@ -48,7 +50,7 @@
 		</p>
 	</section>
 	<div class="prose">
-		<section class="text_align_center">
+		<section>
 			<h3><code>a</code> without a <code>.prose</code> ancestor</h3>
 		</section>
 	</div>
@@ -60,11 +62,11 @@
 		</p>
 	</section>
 	<div class="prose">
-		<section class="text_align_center">
+		<section>
 			<h3>headings and other elements have no margin by default:</h3>
 		</section>
 	</div>
-	<section class="text_align_center box">
+	<section>
 		<h1>h1</h1>
 		<h2>h2</h2>
 		<h3>h3</h3>
@@ -80,11 +82,11 @@
 		<footer>footer</footer>
 	</section>
 	<div class="prose">
-		<section class="text_align_center">
+		<section>
 			<h3>but they do inside <code>.prose</code>:</h3>
 		</section>
 	</div>
-	<section class="prose text_align_center box">
+	<section class="prose">
 		<h1>h1</h1>
 		<h2>h2</h2>
 		<h3>h3</h3>
diff --git a/src/routes/library/theme/+page.svelte b/src/routes/library/theme/+page.svelte
index 2590c1b80..bf0744b68 100644
--- a/src/routes/library/theme/+page.svelte
+++ b/src/routes/library/theme/+page.svelte
@@ -99,7 +99,7 @@
 	</section>
 	<section class="theme box panel">
 		<div class="prose width_sm">
-			<h3 class="text_align_center">color scheme</h3>
+			<h3>color scheme</h3>
 			<p>
 				<code>Themed</code> defaults to automatic
 				<code
@@ -151,7 +151,7 @@
 	</section>
 	<section class="theme box panel">
 		<div class="prose width_sm">
-			<h3 class="text_align_center">themes</h3>
+			<h3>themes</h3>
 			<p>
 				A theme is a simple JSON collection of <Library_Vocab name="variables" /> that can be transformed
 				into CSS that set
@@ -173,7 +173,7 @@
 	</section>
 	<section class="theme box panel">
 		<div class="spaced prose width_sm">
-			<h3 class="text_align_center">scoped themes</h3>
+			<h3>scoped themes</h3>
 		</div>
 		<details>
 			<summary>⚠️ scoped themes are a work in progress</summary>
@@ -235,7 +235,7 @@
 		</details>
 	</section>
 	<section class="theme panel prose">
-		<h3 class="text_align_center">theme usage</h3>
+		<h3>theme usage</h3>
 		<p>Themes are plain CSS that can be sourced in a variety of ways.</p>
 		<p>To use fuz's base theme:</p>
 		<Code
diff --git a/src/routes/library/variables/+page.svelte b/src/routes/library/variables/+page.svelte
index 84bd3c905..068ae48e9 100644
--- a/src/routes/library/variables/+page.svelte
+++ b/src/routes/library/variables/+page.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<section class="prose box width_sm">
+	<section class="prose width_sm">
 		<blockquote>
 			{variables.length} theme variables
 		</blockquote>
diff --git a/svelte.config.js b/svelte.config.js
index 9eac2db9a..0db2faa5b 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -5,7 +5,9 @@ import adapter from '@sveltejs/adapter-static';
 export default {
 	preprocess: [vitePreprocess()],
 	compilerOptions: {immutable: true},
-	vitePlugin: {inspector: true}, // docs: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md
+	// TODO ideally this would use the default but it conflicts with ctrl+shift+c in Chrome,
+	// but it's strange to me that I'm resetting it to what the Mac default is
+	vitePlugin: {inspector: {toggleKeyCombo: 'meta-shift'}}, // docs: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md
 	kit: {
 		adapter: adapter(),
 		alias: {$routes: 'src/routes', $fixtures: 'src/fixtures'},

From 27d558fe109ebdfda8b25b0398be33038f849ac6 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 14:09:58 -0700
Subject: [PATCH 22/29] remove a dead link

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 96f223c2c..e55807ab0 100644
--- a/README.md
+++ b/README.md
@@ -48,8 +48,7 @@ import Themed from '@ryanatkn/fuz/Themed.svelte';
 import {type Theme, get_theme} from '@ryanatkn/fuz/theme.js';
 ```
 
-See [the library](https://www.fuz.dev/library) and
-[modules docs](https://www.fuz.dev/modules) for more.
+See [the library](https://www.fuz.dev/library) for more.
 
 ## develop
 

From b5edb890e91aa5a368333c425f88e8a434edecf4 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 14:20:50 -0700
Subject: [PATCH 23/29] wip

---
 src/routes/library/Contextmenu/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/library/Contextmenu/+page.svelte b/src/routes/library/Contextmenu/+page.svelte
index 53267b09e..6337cb14b 100644
--- a/src/routes/library/Contextmenu/+page.svelte
+++ b/src/routes/library/Contextmenu/+page.svelte
@@ -140,7 +140,7 @@
 <!-- TODO demonstrate usage of a custom `link_component` and `linkProps`  -->
 <Contextmenu {contextmenu} />
 
-<Tome_Detail {tome} --library_panel_padding="var(--spacing_lg) 0 0 0">
+<Tome_Detail {tome}>
 	<div slot="header"><h2>{tome.name}</h2></div>
 	<div
 		use:contextmenu.action={[

From 3b357697936b954665cc4a28fa7bc3c803f6adb9 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 14:55:36 -0700
Subject: [PATCH 24/29] wip

---
 src/lib/style.css                       | 5 +++--
 src/routes/library/buttons/+page.svelte | 9 +++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index 428169d29..5de769290 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -414,6 +414,7 @@ button:focus,
 .buttonlike:focus {
 	--border_color: var(--border_2);
 	background: var(--button_bg_hover);
+	box-shadow: var(--shadow_inset);
 }
 button:active,
 .buttonlike:active {
@@ -421,6 +422,7 @@ button:active,
 	--outline_width: var(--outline_width_3);
 	/* TODO use of `background` vs `background-color` in this file is not intentional */
 	background: var(--button_bg_active);
+	box-shadow: var(--shadow_inset_active);
 }
 button.inline {
 	display: inline-block;
@@ -454,6 +456,7 @@ input[type='radio']:checked {
 	--border_color: var(--border_disabled);
 	--border_style: solid dashed;
 	cursor: default;
+	box-shadow: none;
 	opacity: var(--disabled_opacity);
 	background: var(--button_bg_disabled);
 	outline: none;
@@ -476,11 +479,9 @@ button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7)
 /* TODO differences for hover/focus */
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):is(:hover, :focus) {
 	color: var(--bg_10);
-	box-shadow: var(--shadow_inset);
 }
 button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):active {
 	color: var(--bg_10);
-	box-shadow: var(--shadow_inset_active);
 }
 button.color_1:not(.selected) {
 	background-color: var(--color_1);
diff --git a/src/routes/library/buttons/+page.svelte b/src/routes/library/buttons/+page.svelte
index 6cef672f3..182b25a3b 100644
--- a/src/routes/library/buttons/+page.svelte
+++ b/src/routes/library/buttons/+page.svelte
@@ -15,6 +15,15 @@
 </script>
 
 <Tome_Detail {tome}>
+	<Code content={`<button>`} />
+	<button>button</button>
+	<button disabled>disabled button</button>
+	<button class="selected">button.selected</button>
+	<button class="selected" disabled>disabled button.selected</button>
+	<button class="selected deselectable">button.selected.deselectable</button>
+	<button class="selected deselectable" disabled>disabled button.selected.deselectable</button>
+	<br />
+
 	<section class="prose box">
 		<h3>colorful buttons</h3>
 	</section>

From 26c58314394b5381e57bf0e54128169c11287d12 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 14:58:38 -0700
Subject: [PATCH 25/29] wip

---
 src/routes/library/theme/+page.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/routes/library/theme/+page.svelte b/src/routes/library/theme/+page.svelte
index bf0744b68..59cae539b 100644
--- a/src/routes/library/theme/+page.svelte
+++ b/src/routes/library/theme/+page.svelte
@@ -12,7 +12,6 @@
 	import {default_themes} from '$lib/themes.js';
 	import Theme_Input from '$lib/Theme_Input.svelte';
 	import Theme_Form from '$routes/Theme_Form.svelte';
-	import Style_Examples from '$routes/library/Style_Examples.svelte';
 	import Themed_Scope from '$lib/Themed_Scope.svelte';
 
 	const LIBRARY_ITEM_NAME = 'theme';
@@ -309,9 +308,11 @@ $selected_color_scheme; // '${$selected_color_scheme}'`}
 			</details>
 		</p>
 	</section>
-	<section class="panel prose padded_md">
+	<!-- TODO probably do this, needs colored buttons and other missing things though,
+		gets big - maybe put behind a click? or at least on the main library page? -->
+	<!-- <section class="panel prose padded_md">
 		<Style_Examples />
-	</section>
+	</section> -->
 </Tome_Detail>
 
 {#if show_create_theme_dialog}

From 64950da0814d27973e331540667ec1b30ee33c1d Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 14:59:59 -0700
Subject: [PATCH 26/29] wip

---
 src/routes/library/buttons/+page.svelte | 98 ++++++++++++-------------
 1 file changed, 48 insertions(+), 50 deletions(-)

diff --git a/src/routes/library/buttons/+page.svelte b/src/routes/library/buttons/+page.svelte
index 182b25a3b..a5c7cbdc5 100644
--- a/src/routes/library/buttons/+page.svelte
+++ b/src/routes/library/buttons/+page.svelte
@@ -24,7 +24,7 @@
 	<button class="selected deselectable" disabled>disabled button.selected.deselectable</button>
 	<br />
 
-	<section class="prose box">
+	<section class="prose">
 		<h3>colorful buttons</h3>
 	</section>
 	<br />
@@ -44,7 +44,7 @@
 
 	<hr />
 
-	<div class="box prose">
+	<div class="prose">
 		<h3>disabled button</h3>
 		<Code content={`<button disabled>\n\t:|\n</button>`} />
 		<button disabled>:|</button>
@@ -54,59 +54,57 @@
 
 	<hr />
 
-	<div class="box">
-		<div class="prose">
-			<h3>
-				<code>button</code> with CSS class <code>.selected</code>
-			</h3>
-		</div>
-		<section style:margin-bottom="var(--spacing_4)">
-			<nav>
-				<button class:selected={selected_button === 0} on:click={() => (selected_button = 0)}>
-					button 0
-				</button>
-				<button class:selected={selected_button === 1} on:click={() => (selected_button = 1)}>
-					button 1
-				</button>
-				<button class:selected={selected_button === 2} on:click={() => (selected_button = 2)}>
-					button 2
-				</button>
-			</nav>
+	<div class="prose">
+		<h3>
+			<code>button</code> with CSS class <code>.selected</code>
+		</h3>
+	</div>
+	<section style:margin-bottom="var(--spacing_4)">
+		<nav>
+			<button class:selected={selected_button === 0} on:click={() => (selected_button = 0)}>
+				button 0
+			</button>
+			<button class:selected={selected_button === 1} on:click={() => (selected_button = 1)}>
+				button 1
+			</button>
+			<button class:selected={selected_button === 2} on:click={() => (selected_button = 2)}>
+				button 2
+			</button>
+		</nav>
+	</section>
+	<div class="prose">
+		<section>
+			<Code content={`<button class="selected">...</button>`} />
+			<button class="width_full selected">a button with the <code>.selected</code> class</button>
+		</section>
+		<section>
+			<p class="width_sm">
+				<code>.selected</code> buttons with the <code>.deselectable</code> class continue to be clickable
+				when selected:
+			</p>
+			<Code content={`<button class="selected deselectable">\n\t...\n</button>`} />
+		</section>
+		<section>
+			<button
+				class="width_full deselectable"
+				class:selected={selected_deselectable_button}
+				on:click={() => (selected_deselectable_button = !selected_deselectable_button)}
+				>a <code>.deselectable</code>
+				{#if selected_deselectable_button}<code>.selected</code>{:else}unselected{/if} button</button
+			>
+			<button class="width_full selected deselectable" disabled={true}
+				>disabled <code>.deselectable</code> <code>.selected</code></button
+			>
 		</section>
-		<div class="prose">
-			<section>
-				<Code content={`<button class="selected">...</button>`} />
-				<button class="width_full selected">a button with the <code>.selected</code> class</button>
-			</section>
-			<section>
-				<p class="width_sm">
-					<code>.selected</code> buttons with the <code>.deselectable</code> class continue to be clickable
-					when selected:
-				</p>
-				<Code content={`<button class="selected deselectable">\n\t...\n</button>`} />
-			</section>
-			<section>
-				<button
-					class="width_full deselectable"
-					class:selected={selected_deselectable_button}
-					on:click={() => (selected_deselectable_button = !selected_deselectable_button)}
-					>a <code>.deselectable</code>
-					{#if selected_deselectable_button}<code>.selected</code>{:else}unselected{/if} button</button
-				>
-				<button class="width_full selected deselectable" disabled={true}
-					>disabled <code>.deselectable</code> <code>.selected</code></button
-				>
-			</section>
-		</div>
 	</div>
 
 	<hr />
 
-	<section class="prose box">
+	<section class="prose">
 		<h3><code>.plain</code> and <code>.icon_button</code></h3>
 	</section>
 	<br />
-	<section class="box">
+	<section>
 		<Code
 			content={`<button class="plain">
 	+
@@ -128,7 +126,7 @@
 		/>
 		<button class="plain icon_button">+</button>
 		<br />
-		<div class="prose box">
+		<div class="prose">
 			<h4><code>disabled</code> variants</h4>
 		</div>
 		<br />
@@ -153,7 +151,7 @@
 		/>
 		<button class="plain icon_button" disabled>+</button>
 		<br />
-		<div class="prose box">
+		<div class="prose">
 			<h4><code>.selected</code> variants</h4>
 		</div>
 		<br />
@@ -178,7 +176,7 @@
 		/>
 		<button class="plain icon_button selected">+</button>
 		<br />
-		<div class="prose box">
+		<div class="prose">
 			<h4><code>.selected</code> and <code>.deselectable</code> variants</h4>
 		</div>
 		<br />

From cdd1ec26bce4cb3be23539415882c31750953cfa Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 15:04:34 -0700
Subject: [PATCH 27/29] wip

---
 src/lib/style.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/lib/style.css b/src/lib/style.css
index 5de769290..8031b73ee 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -434,12 +434,14 @@ see https://caniuse.com/css-has
  */
 /* TODO maybe add a style for `button.selected:disabled`, probably reduced brightness,
 currently `:disabled` overrides this */
-button.selected,
-.buttonlike.selected {
+:is(button, .buttonlike).selected {
 	--text_color: var(--text_active);
 	--border_color: var(--color_1);
 	background: var(--button_bg_active);
+}
+:is(button, .buttonlike).selected:not(.deselectable) {
 	cursor: default;
+	box-shadow: none;
 }
 input:checked,
 .buttonlike:hover input:checked:not(:disabled),
@@ -738,9 +740,6 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
 	background-color: var(--button_bg_hover);
 	border-color: var(--border_2);
 }
-/* TODO some inconsistencies here where `.selectable` isn't used in each selector to catch buttons,
-maybe combine these styles with the buttons or scope just to `.selectable`?
-or remove the `.selectable`. from `.selectable.selected`? */
 .selectable.selected,
 .selectable:active {
 	background-color: var(--button_bg_active);
@@ -749,7 +748,7 @@ or remove the `.selectable`. from `.selectable.selected`? */
 .selectable.selected {
 	cursor: default;
 }
-.selected.deselectable:not(:disabled) {
+.selectable.selected.deselectable:not(:disabled) {
 	cursor: pointer;
 }
 

From 1c583abeb116bef77294515079fbacc81cc70d73 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 15:05:10 -0700
Subject: [PATCH 28/29] wip

---
 src/routes/package.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/package.ts b/src/routes/package.ts
index 0e4e03da9..4ed6a34c8 100644
--- a/src/routes/package.ts
+++ b/src/routes/package.ts
@@ -24,7 +24,7 @@ export const package_json = {
 		test: 'gro test',
 	},
 	files: ['dist'],
-	peerDependencies: {'@sveltejs/kit': '*', svelte: '*'},
+	peerDependencies: {'@ryanatkn/belt': '*', '@sveltejs/kit': '*', svelte: '*'},
 	devDependencies: {
 		'@changesets/changelog-git': '^0.2.0',
 		'@ryanatkn/belt': '^0.20.3',

From 4edfbb1bc1572671a23d9adee2b14c07a9cd65c6 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Mon, 19 Feb 2024 15:06:00 -0700
Subject: [PATCH 29/29] add button colors

---
 .changeset/silver-bats-wonder.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silver-bats-wonder.md

diff --git a/.changeset/silver-bats-wonder.md b/.changeset/silver-bats-wonder.md
new file mode 100644
index 000000000..f0ca33918
--- /dev/null
+++ b/.changeset/silver-bats-wonder.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+add button colors