chore(deps): refactor flake dep downloader

flake.nix

@@ -66,11 +66,11 @@
 
 
                 ## Fetch dependenies
-                HTMX_VERSION=2.0.3
-                HYPERSCRIPT_VERSION=0.9.13
-                CHOICES_DOT_JS_VERSION=11.0.2
-                SVG_LOADER_VERISON=1.7.1
-                SORTABLE_VERSION=1.15.6
+                export HTMX_VERSION=2.0.3
+                export HYPERSCRIPT_VERSION=0.9.13
+                export CHOICES_DOT_JS_VERSION=11.0.2
+                export SVG_LOADER_VERSION=1.7.1
+                export SORTABLE_VERSION=1.15.6
 
                 if [ ! -f ./static/js/hyperscript.js ]; then
                   curl -sL --verbose "https://unpkg.com/hyperscript.org@$HYPERSCRIPT_VERSION" > ./static/js/hyperscript.js
@@ -89,11 +89,11 @@
                 fi
 
                 if [ ! -f ./static/js/svg-loader.min.js ]; then
-                  curl -sL --verbose "https://unpkg.com/external-svg-loader@$SVG_LOADER_VERSION/public/assets/scripts/svg-loader.min.js" > ./static/js/svg-loader.min.js
+                  curl -sL --verbose "https://unpkg.com/external-svg-loader@$SVG_LOADER_VERSION/svg-loader.min.js" > ./static/js/svg-loader.min.js
                 fi
 
                 if [ ! -f ./static/js/Sortable.min.js ]; then
-                  curl -sL --verbose "https://unpkg.com/sortablejs@$SVG_LOADER_VERSION/public/assets/scripts/Sortable.min.js" > ./static/js/Sortable.min.js
+                  curl -sL --verbose "https://unpkg.com/sortablejs@$SORTABLE_VERSION/Sortable.min.js" > ./static/js/Sortable.min.js
                 fi
 
                 if [ ! -f ./static/css/choices.min.css ]; then

static/css/styles.css

@@ -1388,6 +1388,21 @@ html {
   text-align: right;
 }
 
+.radio {
+  flex-shrink: 0;
+  --chkbg: var(--bc);
+  height: 1.5rem;
+  width: 1.5rem;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0.2;
+}
+
 .range {
   height: 1.5rem;
   width: 100%;
@@ -1405,6 +1420,21 @@ html {
   outline: none;
 }
 
+.rating {
+  position: relative;
+  display: inline-flex;
+}
+
+.rating :where(input) {
+  cursor: pointer;
+  border-radius: 0px;
+  animation: rating-pop var(--animation-input, 0.25s) ease-out;
+  height: 1.5rem;
+  width: 1.5rem;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  --tw-bg-opacity: 1;
+}
+
 .select {
   display: inline-flex;
   cursor: pointer;
@@ -1795,6 +1825,10 @@ input.tab:checked + .tab-content,
   margin-inline-start: calc(var(--border-btn) * -1);
 }
 
+.join-item:focus {
+  isolation: isolate;
+}
+
 .link:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1895,6 +1929,32 @@ input.tab:checked + .tab-content,
   }
 }
 
+.radio:focus {
+  box-shadow: none;
+}
+
+.radio:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+
+.radio:checked,
+  .radio[aria-checked="true"] {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  background-image: none;
+  animation: radiomark var(--animation-input, 0.2s) ease-out;
+  box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
+      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
+}
+
+.radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+
 @keyframes radiomark {
   0% {
     box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
@@ -1971,6 +2031,39 @@ input.tab:checked + .tab-content,
       calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
 }
 
+.rating input {
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+}
+
+.rating .rating-hidden {
+  width: 0.5rem;
+  background-color: transparent;
+}
+
+.rating input[type="radio"]:checked {
+  background-image: none;
+}
+
+.rating input:checked ~ input,
+  .rating input[aria-checked="true"] ~ input {
+  --tw-bg-opacity: 0.2;
+}
+
+.rating input:focus-visible {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transform: translateY(-0.125em);
+}
+
+.rating input:active:focus {
+  animation: none;
+  transform: translateY(-0.125em);
+}
+
 @keyframes rating-pop {
   0% {
     transform: translateY(-0.125em);
@@ -2486,6 +2579,11 @@ input.tab:checked + .tab-content,
   display: none;
 }
 
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -2975,6 +3073,10 @@ input.tab:checked + .tab-content,
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }