@oscarpalmer/oui 0.9.0 → 0.10.0

package/src/css/color.scss

@@ -1,113 +1,115 @@
+/*! https://github.com/oscarpalmer/oui */
+
 @use './mixins' as mixins;
 
 :root {
 	--oui-absolute: light-dark(white, black);
 
-	--oui-blue-0: light-dark(oklch(0.98 0.015 260), oklch(0.18 0.1 250));
-	--oui-blue-1: light-dark(oklch(0.95 0.03 259), oklch(0.24 0.12 251));
-	--oui-blue-2: light-dark(oklch(0.9 0.05 258), oklch(0.32 0.14 252));
-	--oui-blue-3: light-dark(oklch(0.83 0.07 257), oklch(0.4 0.16 253));
-	--oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.5 0.14 254));
-	--oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.6 0.11 255));
-	--oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.7 0.09 256));
-	--oui-blue-7: light-dark(oklch(0.48 0.16 253), oklch(0.78 0.07 257));
-	--oui-blue-8: light-dark(oklch(0.34 0.14 252), oklch(0.85 0.05 258));
-	--oui-blue-9: light-dark(oklch(0.22 0.12 251), oklch(0.91 0.03 259));
-	--oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.01 260));
+	--oui-blue-0: light-dark(oklch(0.99 0.01 260), oklch(0.2 0.08 250));
+	--oui-blue-1: light-dark(oklch(0.98 0.02 259), oklch(0.25 0.09 251));
+	--oui-blue-2: light-dark(oklch(0.95 0.03 258), oklch(0.32 0.1 252));
+	--oui-blue-3: light-dark(oklch(0.90 0.04 257), oklch(0.40 0.09 253));
+	--oui-blue-4: light-dark(oklch(0.80 0.06 256), oklch(0.5 0.08 254));
+	--oui-blue-5: light-dark(oklch(0.70 0.08 255), oklch(0.6 0.07 255));
+	--oui-blue-6: light-dark(oklch(0.60 0.1 254), oklch(0.7 0.06 256));
+	--oui-blue-7: light-dark(oklch(0.50 0.12 253), oklch(0.8 0.05 257));
+	--oui-blue-8: light-dark(oklch(0.42 0.11 252), oklch(0.85 0.04 258));
+	--oui-blue-9: light-dark(oklch(0.35 0.1 251), oklch(0.9 0.03 259));
+	--oui-blue-10: light-dark(oklch(0.3 0.09 250), oklch(0.95 0.02 260));
 
-	--oui-green-0: light-dark(oklch(0.98 0.015 150), oklch(0.18 0.1 140));
-	--oui-green-1: light-dark(oklch(0.95 0.03 149), oklch(0.24 0.12 141));
-	--oui-green-2: light-dark(oklch(0.9 0.05 148), oklch(0.32 0.14 142));
-	--oui-green-3: light-dark(oklch(0.83 0.07 147), oklch(0.4 0.15 143));
-	--oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.5 0.14 144));
-	--oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.6 0.12 145));
-	--oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.7 0.09 146));
-	--oui-green-7: light-dark(oklch(0.48 0.15 143), oklch(0.78 0.07 147));
-	--oui-green-8: light-dark(oklch(0.34 0.14 142), oklch(0.85 0.05 148));
-	--oui-green-9: light-dark(oklch(0.22 0.12 141), oklch(0.91 0.03 149));
-	--oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
+	--oui-green-0: light-dark(oklch(0.99 0.01 150), oklch(0.2 0.08 140));
+	--oui-green-1: light-dark(oklch(0.98 0.02 149), oklch(0.25 0.09 141));
+	--oui-green-2: light-dark(oklch(0.95 0.03 148), oklch(0.32 0.1 142));
+	--oui-green-3: light-dark(oklch(0.90 0.04 147), oklch(0.4 0.09 143));
+	--oui-green-4: light-dark(oklch(0.80 0.06 146), oklch(0.5 0.08 144));
+	--oui-green-5: light-dark(oklch(0.70 0.08 145), oklch(0.6 0.07 145));
+	--oui-green-6: light-dark(oklch(0.60 0.1 144), oklch(0.7 0.06 146));
+	--oui-green-7: light-dark(oklch(0.50 0.12 143), oklch(0.8 0.05 147));
+	--oui-green-8: light-dark(oklch(0.42 0.11 142), oklch(0.85 0.04 148));
+	--oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
+	--oui-green-10: light-dark(oklch(0.3 0.09 140), oklch(0.95 0.02 150));
 
-	--oui-orange-0: light-dark(oklch(0.985 0.02 60), oklch(0.18 0.1 50));
-	--oui-orange-1: light-dark(oklch(0.95 0.03 59), oklch(0.24 0.11 51));
-	--oui-orange-2: light-dark(oklch(0.9 0.05 58), oklch(0.32 0.12 52));
-	--oui-orange-3: light-dark(oklch(0.83 0.08 57), oklch(0.4 0.13 53));
-	--oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.5 0.14 54));
-	--oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.6 0.13 55));
-	--oui-orange-6: light-dark(oklch(0.57 0.14 54), oklch(0.7 0.11 56));
-	--oui-orange-7: light-dark(oklch(0.46 0.13 53), oklch(0.78 0.08 57));
-	--oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.85 0.05 58));
-	--oui-orange-9: light-dark(oklch(0.22 0.11 51), oklch(0.91 0.03 59));
-	--oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.97 0.02 60));
+	--oui-orange-0: light-dark(oklch(0.995 0.02 60), oklch(0.2 0.08 50));
+	--oui-orange-1: light-dark(oklch(0.99 0.035 59), oklch(0.25 0.09 51));
+	--oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
+	--oui-orange-3: light-dark(oklch(0.93 0.07 57), oklch(0.4 0.09 53));
+	--oui-orange-4: light-dark(oklch(0.85 0.1 56), oklch(0.5 0.08 54));
+	--oui-orange-5: light-dark(oklch(0.70 0.11 55), oklch(0.6 0.07 55));
+	--oui-orange-6: light-dark(oklch(0.60 0.12 54), oklch(0.7 0.06 56));
+	--oui-orange-7: light-dark(oklch(0.50 0.14 53), oklch(0.8 0.05 57));
+	--oui-orange-8: light-dark(oklch(0.42 0.12 53), oklch(0.85 0.04 58));
+	--oui-orange-9: light-dark(oklch(0.35 0.11 51), oklch(0.9 0.03 59));
+	--oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
 
-	--oui-purple-0: light-dark(oklch(0.98 0.015 300), oklch(0.18 0.1 290));
-	--oui-purple-1: light-dark(oklch(0.95 0.03 299), oklch(0.24 0.11 291));
-	--oui-purple-2: light-dark(oklch(0.9 0.05 298), oklch(0.32 0.12 292));
-	--oui-purple-3: light-dark(oklch(0.83 0.07 297), oklch(0.4 0.13 293));
-	--oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.5 0.12 294));
-	--oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.6 0.11 295));
-	--oui-purple-6: light-dark(oklch(0.58 0.12 294), oklch(0.7 0.09 296));
-	--oui-purple-7: light-dark(oklch(0.48 0.13 293), oklch(0.78 0.07 297));
-	--oui-purple-8: light-dark(oklch(0.34 0.12 292), oklch(0.85 0.05 298));
-	--oui-purple-9: light-dark(oklch(0.22 0.11 291), oklch(0.91 0.03 299));
-	--oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
+	--oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
+	--oui-purple-1: light-dark(oklch(0.98 0.035 299), oklch(0.25 0.09 291));
+	--oui-purple-2: light-dark(oklch(0.95 0.05 298), oklch(0.32 0.1 292));
+	--oui-purple-3: light-dark(oklch(0.90 0.07 297), oklch(0.4 0.09 293));
+	--oui-purple-4: light-dark(oklch(0.80 0.1 296), oklch(0.5 0.08 294));
+	--oui-purple-5: light-dark(oklch(0.70 0.11 295), oklch(0.6 0.07 295));
+	--oui-purple-6: light-dark(oklch(0.60 0.12 294), oklch(0.7 0.06 296));
+	--oui-purple-7: light-dark(oklch(0.50 0.14 293), oklch(0.8 0.05 297));
+	--oui-purple-8: light-dark(oklch(0.42 0.12 292), oklch(0.85 0.04 298));
+	--oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
+	--oui-purple-10: light-dark(oklch(0.3 0.09 290), oklch(0.95 0.02 300));
 
-	--oui-red-0: light-dark(oklch(0.98 0.015 15), oklch(0.18 0.1 25));
-	--oui-red-1: light-dark(oklch(0.95 0.025 16), oklch(0.24 0.125 24));
-	--oui-red-2: light-dark(oklch(0.9 0.045 17), oklch(0.32 0.15 23));
-	--oui-red-3: light-dark(oklch(0.83 0.08 18), oklch(0.4 0.17 22));
-	--oui-red-4: light-dark(oklch(0.75 0.11 19), oklch(0.5 0.16 21));
-	--oui-red-5: light-dark(oklch(0.67 0.15 20), oklch(0.6 0.15 20));
-	--oui-red-6: light-dark(oklch(0.58 0.16 21), oklch(0.7 0.11 19));
-	--oui-red-7: light-dark(oklch(0.48 0.17 22), oklch(0.78 0.08 18));
-	--oui-red-8: light-dark(oklch(0.34 0.15 23), oklch(0.85 0.045 17));
-	--oui-red-9: light-dark(oklch(0.22 0.125 24), oklch(0.91 0.025 16));
-	--oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
+	--oui-red-0: light-dark(oklch(0.995 0.024 25), oklch(0.2 0.08 25));
+	--oui-red-1: light-dark(oklch(0.99 0.032 24), oklch(0.25 0.09 24));
+	--oui-red-2: light-dark(oklch(0.96 0.05 23), oklch(0.32 0.1 23));
+	--oui-red-3: light-dark(oklch(0.93 0.07 22), oklch(0.4 0.09 22));
+	--oui-red-4: light-dark(oklch(0.85 0.1 21), oklch(0.5 0.08 21));
+	--oui-red-5: light-dark(oklch(0.72 0.11 20), oklch(0.6 0.07 20));
+	--oui-red-6: light-dark(oklch(0.60 0.12 19), oklch(0.7 0.06 19));
+	--oui-red-7: light-dark(oklch(0.50 0.14 18), oklch(0.8 0.05 18));
+	--oui-red-8: light-dark(oklch(0.42 0.12 17), oklch(0.85 0.04 17));
+	--oui-red-9: light-dark(oklch(0.35 0.11 16), oklch(0.9 0.03 16));
+	--oui-red-10: light-dark(oklch(0.3 0.09 15), oklch(0.95 0.02 15));
 
-	--oui-yellow-0: light-dark(oklch(0.985 0.02 100), oklch(0.18 0.1 90));
-	--oui-yellow-1: light-dark(oklch(0.955 0.04 99), oklch(0.24 0.12 91));
-	--oui-yellow-2: light-dark(oklch(0.915 0.08 98), oklch(0.32 0.14 92));
-	--oui-yellow-3: light-dark(oklch(0.865 0.12 97), oklch(0.4 0.16 93));
-	--oui-yellow-4: light-dark(oklch(0.805 0.14 96), oklch(0.5 0.18 94));
-	--oui-yellow-5: light-dark(oklch(0.735 0.16 95), oklch(0.6 0.16 95));
-	--oui-yellow-6: light-dark(oklch(0.635 0.18 94), oklch(0.7 0.14 96));
-	--oui-yellow-7: light-dark(oklch(0.515 0.16 93), oklch(0.78 0.12 97));
-	--oui-yellow-8: light-dark(oklch(0.385 0.14 92), oklch(0.85 0.08 98));
-	--oui-yellow-9: light-dark(oklch(0.255 0.12 91), oklch(0.91 0.04 99));
-	--oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.97 0.02 100));
+	--oui-yellow-0: light-dark(oklch(0.995 0.02 100), oklch(0.2 0.08 90));
+	--oui-yellow-1: light-dark(oklch(0.99 0.035 99), oklch(0.25 0.09 91));
+	--oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
+	--oui-yellow-3: light-dark(oklch(0.93 0.07 97), oklch(0.4 0.09 93));
+	--oui-yellow-4: light-dark(oklch(0.85 0.1 96), oklch(0.5 0.08 94));
+	--oui-yellow-5: light-dark(oklch(0.72 0.11 95), oklch(0.6 0.07 95));
+	--oui-yellow-6: light-dark(oklch(0.60 0.12 94), oklch(0.7 0.06 96));
+	--oui-yellow-7: light-dark(oklch(0.50 0.14 93), oklch(0.8 0.05 97));
+	--oui-yellow-8: light-dark(oklch(0.42 0.12 92), oklch(0.85 0.04 98));
+	--oui-yellow-9: light-dark(oklch(0.35 0.11 91), oklch(0.9 0.03 99));
+	--oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
 
-	--oui-gray-0: light-dark(oklch(0.99 0 0), oklch(0.18 0 0));
-	--oui-gray-1: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
-	--oui-gray-2: light-dark(oklch(0.94 0 0), oklch(0.32 0 0));
-	--oui-gray-3: light-dark(oklch(0.88 0 0), oklch(0.4 0 0));
-	--oui-gray-4: light-dark(oklch(0.78 0 0), oklch(0.5 0 0));
-	--oui-gray-5: light-dark(oklch(0.67 0 0), oklch(0.6 0 0));
-	--oui-gray-6: light-dark(oklch(0.58 0 0), oklch(0.7 0 0));
-	--oui-gray-7: light-dark(oklch(0.48 0 0), oklch(0.78 0 0));
-	--oui-gray-8: light-dark(oklch(0.34 0 0), oklch(0.85 0 0));
-	--oui-gray-9: light-dark(oklch(0.22 0 0), oklch(0.91 0 0));
-	--oui-gray-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
+	--oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
+	--oui-gray-1: light-dark(oklch(0.98 0 0), oklch(0.26 0 0));
+	--oui-gray-2: light-dark(oklch(0.95 0 0), oklch(0.32 0 0));
+	--oui-gray-3: light-dark(oklch(0.90 0 0), oklch(0.4 0 0));
+	--oui-gray-4: light-dark(oklch(0.80 0 0), oklch(0.5 0 0));
+	--oui-gray-5: light-dark(oklch(0.70 0 0), oklch(0.6 0 0));
+	--oui-gray-6: light-dark(oklch(0.60 0 0), oklch(0.7 0 0));
+	--oui-gray-7: light-dark(oklch(0.50 0 0), oklch(0.8 0 0));
+	--oui-gray-8: light-dark(oklch(0.42 0 0), oklch(0.85 0 0));
+	--oui-gray-9: light-dark(oklch(0.35 0 0), oklch(0.9 0 0));
+	--oui-gray-10: light-dark(oklch(0.3 0 0), oklch(0.95 0 0));
 
-	--oui-slate-0: light-dark(oklch(0.99 0.0033 255), oklch(0.18 0.005 255));
-	--oui-slate-1: light-dark(oklch(0.97 0.0067 255), oklch(0.24 0.0075 255));
-	--oui-slate-2: light-dark(oklch(0.94 0.01 255), oklch(0.32 0.01 255));
-	--oui-slate-3: light-dark(oklch(0.88 0.0125 255), oklch(0.4 0.0125 255));
-	--oui-slate-4: light-dark(oklch(0.78 0.015 255), oklch(0.5 0.015 255));
-	--oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.6 0.02 255));
-	--oui-slate-6: light-dark(oklch(0.58 0.015 255), oklch(0.7 0.015 255));
-	--oui-slate-7: light-dark(oklch(0.48 0.0125 255), oklch(0.78 0.0125 255));
-	--oui-slate-8: light-dark(oklch(0.34 0.01 255), oklch(0.85 0.01 255));
-	--oui-slate-9: light-dark(oklch(0.22 0.0075 255), oklch(0.91 0.0075 255));
-	--oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
+	--oui-slate-0: light-dark(oklch(0.99 0.0025 255), oklch(0.22 0.005 255));
+	--oui-slate-1: light-dark(oklch(0.98 0.005 255), oklch(0.26 0.0075 255));
+	--oui-slate-2: light-dark(oklch(0.95 0.0075 255), oklch(0.32 0.01 255));
+	--oui-slate-3: light-dark(oklch(0.90 0.01 255), oklch(0.4 0.0125 255));
+	--oui-slate-4: light-dark(oklch(0.80 0.015 255), oklch(0.5 0.015 255));
+	--oui-slate-5: light-dark(oklch(0.70 0.02 255), oklch(0.6 0.02 255));
+	--oui-slate-6: light-dark(oklch(0.60 0.015 255), oklch(0.7 0.015 255));
+	--oui-slate-7: light-dark(oklch(0.50 0.0125 255), oklch(0.8 0.0125 255));
+	--oui-slate-8: light-dark(oklch(0.42 0.01 255), oklch(0.85 0.01 255));
+	--oui-slate-9: light-dark(oklch(0.35 0.0075 255), oklch(0.9 0.0075 255));
+	--oui-slate-10: light-dark(oklch(0.3 0.005 255), oklch(0.95 0.005 255));
 
-	--oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.18 0.005 95));
-	--oui-stone-1: light-dark(oklch(0.97 0.0067 95), oklch(0.24 0.0075 95));
-	--oui-stone-2: light-dark(oklch(0.94 0.01 95), oklch(0.32 0.01 95));
-	--oui-stone-3: light-dark(oklch(0.88 0.0125 95), oklch(0.4 0.0125 95));
-	--oui-stone-4: light-dark(oklch(0.78 0.015 95), oklch(0.5 0.015 95));
-	--oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.6 0.02 95));
-	--oui-stone-6: light-dark(oklch(0.58 0.015 95), oklch(0.7 0.015 95));
-	--oui-stone-7: light-dark(oklch(0.48 0.0125 95), oklch(0.78 0.0125 95));
-	--oui-stone-8: light-dark(oklch(0.34 0.01 95), oklch(0.85 0.01 95));
-	--oui-stone-9: light-dark(oklch(0.22 0.0075 95), oklch(0.91 0.0075 95));
-	--oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
+	--oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.22 0.005 95));
+	--oui-stone-1: light-dark(oklch(0.98 0.0067 95), oklch(0.26 0.0075 95));
+	--oui-stone-2: light-dark(oklch(0.95 0.01 95), oklch(0.32 0.01 95));
+	--oui-stone-3: light-dark(oklch(0.90 0.0125 95), oklch(0.4 0.0125 95));
+	--oui-stone-4: light-dark(oklch(0.80 0.015 95), oklch(0.5 0.015 95));
+	--oui-stone-5: light-dark(oklch(0.70 0.02 95), oklch(0.6 0.02 95));
+	--oui-stone-6: light-dark(oklch(0.60 0.015 95), oklch(0.7 0.015 95));
+	--oui-stone-7: light-dark(oklch(0.50 0.0125 95), oklch(0.8 0.0125 95));
+	--oui-stone-8: light-dark(oklch(0.42 0.01 95), oklch(0.85 0.01 95));
+	--oui-stone-9: light-dark(oklch(0.35 0.0075 95), oklch(0.9 0.0075 95));
+	--oui-stone-10: light-dark(oklch(0.3 0.005 95), oklch(0.95 0.005 95));
 }

package/src/css/form.scss

@@ -1,5 +1,15 @@
+/*! https://github.com/oscarpalmer/oui */
+
 @use 'mixins.scss' as mixins;
 
+@mixin input {
+	outline: 4px solid transparent;
+	outline-offset: 0;
+	background-color: var(--oui-absolute);
+	box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
+	transition: 0.125s ease-in-out;
+}
+
 :where(.oui-fieldset) {
 	padding: 1em;
 	border: 1px solid var(--oui-gray-3);
@@ -7,68 +17,180 @@
 }
 
 .oui-input {
-	:where(&) {
+	:where(&:not([type='range' i])) {
+		@include input;
+
 		padding: 0.5em 0.75em;
-		outline: 3px solid transparent;
-		outline-offset: 0;
-		background-color: var(--oui-absolute);
 		border-color: var(--oui-gray-3);
 		border-radius: 0.25em;
-		box-shadow: inset 0 1px 2px 0
-			color-mix(in oklab, var(--oui-gray-10), transparent 80%);
-		transition: 0.125s ease-in-out;
 	}
 
-	:where(&:not(textarea)) {
+	:where(&:not([type='range' i], select[multiple], textarea)) {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
 
-	:where(
-			&:is(
-					[type='date'],
-					[type='datetime-local'],
-					[type='month'],
-					[type='number'],
-					[type='tel'],
-					[type='time'],
-					[type='url'],
-					[type='week']
-				)
-		) {
+	:where(&:is([list])) {
+		&::-webkit-calendar-picker-indicator {
+			display: none !important;
+		}
+	}
+
+	:where(&:is([type='color' i])) {
+		padding: 0;
+	}
+
+	:where(&:is([type='date' i],
+			[type='datetime-local' i],
+			[type='month' i],
+			[type='number' i],
+			[type='tel' i],
+			[type='time' i],
+			[type='url' i],
+			[type='week' i])) {
 		font-variant-numeric: tabular-nums;
 	}
 
-	:where(
-			&.oui-validateable:not([disabled], [aria-disabled='true']):is(
-					:user-invalid,
-					[aria-invalid='true']
-				)
-		) {
-		outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
-		border-color: var(--oui-red-6);
+	:where(&:is([type='file' i])) {
+		padding-left: .5em;
+
+		&::file-selector-button {
+			padding: .5em .75em;
+			margin: 0 .75em 0 0;
+			background-color: var(--oui-gray-1);
+			border: 1px solid var(--oui-gray-3);
+			border-radius: .25em;
+			box-shadow: inset 0 1px 0 0 var(--oui-gray-0), 0 1px 2px 0 rgba(0, 0, 0, 0.125);
+			color: var(--oui-gray-8);
+			font-size: .75em;
+			line-height: 1;
+			transition: .125s ease-in-out;
+			cursor: pointer;
+		}
+	}
+
+	:where(&:is([type='range' i])) {
+		appearance: none;
+		outline: none;
+
+		&::range-track {
+			@include input;
+
+			appearance: none;
+			width: 100%;
+			height: 0.75em;
+			border: 1px solid var(--oui-gray-3);
+			border-radius: .75em;
+			position: relative;
+		}
+
+		&::range-thumb {
+			appearance: none;
+			width: 1.25em;
+			height: 1.25em;
+			background-color: var(--oui-blue-6);
+			outline: 4px solid transparent;
+			border: 2px solid var(--oui-absolute);
+			border-radius: 1.25em;
+			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
+			transition: .125s ease-in-out;
+			cursor: pointer;
+		}
+	}
+
+	:where(&.oui-validatable:not([disabled], [aria-disabled='true' i]):is(:user-invalid,
+			[aria-invalid='true' i])) {
+		& {
+			outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
+			border-color: var(--oui-red-6);
+		}
+
+		&::range-track {
+			outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
+			border-color: var(--oui-red-6);
+		}
+
+		&::file-selector-button {
+			background-color: var(--oui-red-0);
+			border-color: var(--oui-red-2);
+			color: var(--oui-red-9);
+		}
+
+		&::range-thumb {
+			background-color: var(--oui-red-6);
+		}
 	}
 
-	:where(
-			&.oui-validateable:not([disabled], [aria-disabled='true']):is(
-					:user-valid,
-					[aria-invalid='false']
-				)
-		) {
-		outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
-		border-color: var(--oui-green-6);
+	:where(&.oui-validatable:not([disabled], [aria-disabled='true' i]):is(:user-valid,
+			[aria-invalid='false' i])) {
+		& {
+			outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
+			border-color: var(--oui-green-6);
+		}
+
+		&::range-track {
+			outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
+			border-color: var(--oui-green-6);
+		}
+
+		&::file-selector-button {
+			background-color: var(--oui-green-0);
+			border-color: var(--oui-green-3);
+			color: var(--oui-green-9);
+		}
+
+		&::range-thumb {
+			background-color: var(--oui-green-6);
+		}
 	}
 
-	:where(&:not([disabled], [aria-disabled='true']):focus) {
+	:where(&:not([disabled], [aria-disabled='true' i]):focus) {
 		outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
 		border-color: var(--oui-blue-6);
+
+		&::file-selector-button {
+			background-color: var(--oui-blue-0);
+			border-color: var(--oui-blue-3);
+			color: var(--oui-blue-9);
+		}
+
+		&::range-track,
+		&::range-thumb {
+			outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
+		}
+
+		&::range-track {
+			border-color: var(--oui-blue-6);
+		}
+
+		&::range-thumb {
+			background-color: var(--oui-blue-6);
+			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
+		}
 	}
 
 	@media (hover: hover) {
-		:where(&:not([disabled], [aria-disabled='true']):hover) {
-			outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
-			border-color: var(--oui-blue-6);
+		:where(&:not([disabled], [aria-disabled='true' i]):hover) {
+			& {
+				outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
+				border-color: var(--oui-blue-6);
+			}
+
+			&::range-track {
+				outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
+				border-color: var(--oui-blue-6);
+			}
+
+			&::file-selector-button {
+				background-color: var(--oui-blue-0);
+				border-color: var(--oui-blue-3);
+				color: var(--oui-blue-9);
+			}
+
+			&::range-thumb {
+				background-color: var(--oui-blue-5);
+			}
 		}
 	}
 
@@ -76,17 +198,65 @@
 		color: color-mix(in oklab, currentColor, transparent 12.5%);
 	}
 
-	:where(&[disabled], &[aria-disabled='true']) {
-		background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
-		color: color-mix(in oklab, currentColor, transparent 25%);
+	:where(&[disabled], &[aria-disabled='true' i]) {
+		& {
+			background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
+			color: color-mix(in oklab, currentColor, transparent 25%);
+			font-style: italic;
+		}
+
+		&::range-track {
+			background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
+			color: color-mix(in oklab, currentColor, transparent 25%);
+			font-style: italic;
+		}
+
+		&::file-selector-button,
+		&::range-thumb {
+			background-color: var(--oui-gray-1);
+		}
 	}
 }
 
-:where(select.oui-input) {
+:where(select.oui-input, .oui-input[list]) {
 	padding-right: 2em;
 	background-position: right 0.5em center;
 }
 
+select.oui-input:is([multiple]) {
+	:where(&) {
+		--oui-off: attr(oui-off);
+		--oui-on: attr(oui-on, '\2713');
+
+		padding: 0;
+	}
+
+	:where(& > option) {
+		padding: 0.5em 0.75em;
+	}
+
+	:where(&[oui-off] > option) {
+		&::before {
+			content: var(--oui-off);
+			margin: 0 0.75em 0 0;
+		}
+	}
+
+	:where(& > option:nth-of-type(2n)) {
+		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%)
+	}
+
+	:where(& > option:checked) {
+		background-color: var(--oui-blue-1);
+		color: var(--oui-blue-9);
+
+		&::before {
+			content: var(--oui-on);
+			margin: 0 .75em 0 0;
+		}
+	}
+}
+
 :where(textarea.oui-input) {
 	min-height: 4em;
 	resize: vertical;
@@ -100,6 +270,13 @@
 
 :where(.oui-label) {
 	cursor: pointer;
+	transition: .125s ease-in-out;
+
+	@media (hover: hover) {
+		:where(&:hover) {
+			color: var(--oui-blue-8);
+		}
+	}
 }
 
 :where(.oui-legend) {
@@ -121,7 +298,7 @@
 	}
 
 	&::before {
-		outline: 3px solid transparent;
+		outline: 4px solid transparent;
 		outline-offset: 0;
 	}
 }
@@ -142,7 +319,7 @@
 		}
 
 		&::after {
-			content: '\2715';
+			content: attr(oui-off, '\2715');
 			width: 1.5em;
 			height: 1.5em;
 			background-color: var(--oui-absolute);
@@ -160,7 +337,7 @@
 
 	:where(&:has(input:checked)) {
 		&::after {
-			content: '\2713';
+			content: attr(oui-on, '\2713');
 			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
 			color: var(--oui-blue-8);
 			right: 0.25em;
@@ -187,13 +364,13 @@
 		}
 	}
 
-	:where(&:has(input[type='checkbox'])) {
+	:where(&:has(input[type='checkbox' i])) {
 		&::before {
 			border-radius: 0.25em;
 		}
 
 		&::after {
-			content: '\2713';
+			content: attr(oui-on, '\2713');
 			width: 1.5em;
 			height: 1.5em;
 			color: white;
@@ -205,7 +382,8 @@
 		}
 	}
 
-	:where(&:has(input[type='radio'])) {
+	:where(&:has(input[type='radio' i])) {
+
 		&::before,
 		&::after {
 			border-radius: 50%;
@@ -237,7 +415,7 @@
 		}
 	}
 
-	:where(&:has(input:not([disabled], [aria-disabled='true'])):focus-within) {
+	:where(&:has(input:not([disabled], [aria-disabled='true' i])):focus-within) {
 		color: var(--oui-blue-8);
 
 		&::before {
@@ -247,7 +425,7 @@
 	}
 
 	@media (hover: hover) {
-		:where(&:has(input:not([disabled], [aria-disabled='true'])):hover) {
+		:where(&:has(input:not([disabled], [aria-disabled='true' i])):hover) {
 			color: var(--oui-blue-8);
 
 			&::before {
@@ -256,20 +434,15 @@
 			}
 		}
 
-		:where(
-				&:has(input:not([disabled], [aria-disabled='true']):is(:checked)):hover
-			)::before {
+		:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover)::before {
 			background-color: color-mix(in oklab, var(--oui-blue-6), transparent 40%);
 		}
 	}
 
-	:where(&:has(input[disabled], input[aria-disabled='true'])) {
+	:where(&:has(input[disabled], input[aria-disabled='true' i])) {
+		color: color-mix(in oklab, currentColor, transparent 25%);
 		cursor: default;
 
-		& {
-			color: color-mix(in oklab, currentColor, transparent 25%);
-		}
-
 		&::after {
 			color: color-mix(in oklab, currentColor, transparent);
 		}