@oscarpalmer/oui 0.17.0 → 0.19.0

package/src/css/color.scss

@@ -5,111 +5,111 @@
 :root {
 	--oui-absolute: light-dark(white, black);
 
-	--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-blue-0: light-dark(oklch(99% 0.01 260deg), oklch(20% 0.08 250deg));
+	--oui-blue-1: light-dark(oklch(98% 0.02 259deg), oklch(25% 0.09 251deg));
+	--oui-blue-2: light-dark(oklch(95% 0.03 258deg), oklch(32% 0.1 252deg));
+	--oui-blue-3: light-dark(oklch(90% 0.04 257deg), oklch(40% 0.09 253deg));
+	--oui-blue-4: light-dark(oklch(80% 0.06 256deg), oklch(50% 0.08 254deg));
+	--oui-blue-5: light-dark(oklch(70% 0.08 255deg), oklch(60% 0.07 255deg));
+	--oui-blue-6: light-dark(oklch(60% 0.1 254deg), oklch(70% 0.06 256deg));
+	--oui-blue-7: light-dark(oklch(50% 0.12 253deg), oklch(80% 0.05 257deg));
+	--oui-blue-8: light-dark(oklch(42% 0.11 252deg), oklch(85% 0.04 258deg));
+	--oui-blue-9: light-dark(oklch(35% 0.1 251deg), oklch(90% 0.03 259deg));
+	--oui-blue-10: light-dark(oklch(30% 0.09 250deg), oklch(95% 0.02 260deg));
 
-	--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-green-0: light-dark(oklch(99% 0.01 150deg), oklch(20% 0.08 140deg));
+	--oui-green-1: light-dark(oklch(98% 0.02 149deg), oklch(25% 0.09 141deg));
+	--oui-green-2: light-dark(oklch(95% 0.03 148deg), oklch(32% 0.1 142deg));
+	--oui-green-3: light-dark(oklch(90% 0.04 147deg), oklch(40% 0.09 143deg));
+	--oui-green-4: light-dark(oklch(80% 0.06 146deg), oklch(50% 0.08 144deg));
+	--oui-green-5: light-dark(oklch(70% 0.08 145deg), oklch(60% 0.07 145deg));
+	--oui-green-6: light-dark(oklch(60% 0.1 144deg), oklch(70% 0.06 146deg));
+	--oui-green-7: light-dark(oklch(50% 0.12 143deg), oklch(80% 0.05 147deg));
+	--oui-green-8: light-dark(oklch(42% 0.11 142deg), oklch(85% 0.04 148deg));
+	--oui-green-9: light-dark(oklch(35% 0.1 141deg), oklch(90% 0.03 149deg));
+	--oui-green-10: light-dark(oklch(30% 0.09 140deg), oklch(95% 0.02 150deg));
 
-	--oui-orange-0: light-dark(oklch(0.99 0.02 60), oklch(0.2 0.08 50));
-	--oui-orange-1: light-dark(oklch(0.985 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.87 0.1 56), oklch(0.5 0.08 54));
-	--oui-orange-5: light-dark(oklch(0.76 0.11 55), oklch(0.6 0.07 55));
-	--oui-orange-6: light-dark(oklch(0.65 0.12 54), oklch(0.7 0.06 56));
-	--oui-orange-7: light-dark(oklch(0.55 0.14 53), oklch(0.8 0.05 57));
-	--oui-orange-8: light-dark(oklch(0.45 0.12 52), oklch(0.85 0.04 58));
-	--oui-orange-9: light-dark(oklch(0.375 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-orange-0: light-dark(oklch(99% 0.02 60deg), oklch(20% 0.08 50deg));
+	--oui-orange-1: light-dark(oklch(98.5% 0.035 59deg), oklch(25% 0.09 51deg));
+	--oui-orange-2: light-dark(oklch(97% 0.05 58deg), oklch(32% 0.1 52deg));
+	--oui-orange-3: light-dark(oklch(93% 0.07 57deg), oklch(40% 0.09 53deg));
+	--oui-orange-4: light-dark(oklch(87% 0.1 56deg), oklch(50% 0.08 54deg));
+	--oui-orange-5: light-dark(oklch(76% 0.11 55deg), oklch(60% 0.07 55deg));
+	--oui-orange-6: light-dark(oklch(65% 0.12 54deg), oklch(70% 0.06 56deg));
+	--oui-orange-7: light-dark(oklch(55% 0.14 53deg), oklch(80% 0.05 57deg));
+	--oui-orange-8: light-dark(oklch(45% 0.12 52deg), oklch(85% 0.04 58deg));
+	--oui-orange-9: light-dark(oklch(37.5% 0.11 51deg), oklch(90% 0.03 59deg));
+	--oui-orange-10: light-dark(oklch(30% 0.09 50deg), oklch(95% 0.02 60deg));
 
-	--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-purple-0: light-dark(oklch(99% 0.02 300deg), oklch(20% 0.08 290deg));
+	--oui-purple-1: light-dark(oklch(98% 0.035 299deg), oklch(25% 0.09 291deg));
+	--oui-purple-2: light-dark(oklch(95% 0.05 298deg), oklch(32% 0.1 292deg));
+	--oui-purple-3: light-dark(oklch(90% 0.07 297deg), oklch(40% 0.09 293deg));
+	--oui-purple-4: light-dark(oklch(80% 0.1 296deg), oklch(50% 0.08 294deg));
+	--oui-purple-5: light-dark(oklch(70% 0.11 295deg), oklch(60% 0.07 295deg));
+	--oui-purple-6: light-dark(oklch(60% 0.12 294deg), oklch(70% 0.06 296deg));
+	--oui-purple-7: light-dark(oklch(50% 0.14 293deg), oklch(80% 0.05 297deg));
+	--oui-purple-8: light-dark(oklch(42% 0.12 292deg), oklch(85% 0.04 298deg));
+	--oui-purple-9: light-dark(oklch(35% 0.11 291deg), oklch(90% 0.03 299deg));
+	--oui-purple-10: light-dark(oklch(30% 0.09 290deg), oklch(95% 0.02 300deg));
 
-	--oui-red-0: light-dark(oklch(0.99 0.024 25), oklch(0.2 0.08 25));
-	--oui-red-1: light-dark(oklch(0.985 0.032 24), oklch(0.25 0.09 24));
-	--oui-red-2: light-dark(oklch(0.97 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.87 0.1 21), oklch(0.5 0.08 21));
-	--oui-red-5: light-dark(oklch(0.76 0.11 20), oklch(0.6 0.07 20));
-	--oui-red-6: light-dark(oklch(0.65 0.12 19), oklch(0.7 0.06 19));
-	--oui-red-7: light-dark(oklch(0.55 0.14 18), oklch(0.8 0.05 18));
-	--oui-red-8: light-dark(oklch(0.45 0.12 17), oklch(0.85 0.04 17));
-	--oui-red-9: light-dark(oklch(0.375 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-red-0: light-dark(oklch(99% 0.024 25deg), oklch(20% 0.08 25deg));
+	--oui-red-1: light-dark(oklch(98.5% 0.032 24deg), oklch(25% 0.09 24deg));
+	--oui-red-2: light-dark(oklch(97% 0.05 23deg), oklch(32% 0.1 23deg));
+	--oui-red-3: light-dark(oklch(93% 0.07 22deg), oklch(40% 0.09 22deg));
+	--oui-red-4: light-dark(oklch(87% 0.1 21deg), oklch(50% 0.08 21deg));
+	--oui-red-5: light-dark(oklch(76% 0.11 20deg), oklch(60% 0.07 20deg));
+	--oui-red-6: light-dark(oklch(65% 0.12 19deg), oklch(70% 0.06 19deg));
+	--oui-red-7: light-dark(oklch(55% 0.14 18deg), oklch(80% 0.05 18deg));
+	--oui-red-8: light-dark(oklch(45% 0.12 17deg), oklch(85% 0.04 17deg));
+	--oui-red-9: light-dark(oklch(37.5% 0.11 16deg), oklch(90% 0.03 16deg));
+	--oui-red-10: light-dark(oklch(30% 0.09 15deg), oklch(95% 0.02 15deg));
 
-	--oui-yellow-0: light-dark(oklch(0.99 0.02 100), oklch(0.2 0.08 90));
-	--oui-yellow-1: light-dark(oklch(0.985 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.87 0.1 96), oklch(0.5 0.08 94));
-	--oui-yellow-5: light-dark(oklch(.78 0.11 95), oklch(0.6 0.07 95));
-	--oui-yellow-6: light-dark(oklch(0.65 0.12 94), oklch(0.7 0.06 96));
-	--oui-yellow-7: light-dark(oklch(0.55 0.14 93), oklch(0.8 0.05 97));
-	--oui-yellow-8: light-dark(oklch(0.45 0.12 92), oklch(0.85 0.04 98));
-	--oui-yellow-9: light-dark(oklch(0.375 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-yellow-0: light-dark(oklch(99% 0.02 100deg), oklch(20% 0.08 90deg));
+	--oui-yellow-1: light-dark(oklch(98.5% 0.035 99deg), oklch(25% 0.09 91deg));
+	--oui-yellow-2: light-dark(oklch(97% 0.05 98deg), oklch(32% 0.1 92deg));
+	--oui-yellow-3: light-dark(oklch(93% 0.07 97deg), oklch(40% 0.09 93deg));
+	--oui-yellow-4: light-dark(oklch(87% 0.1 96deg), oklch(50% 0.08 94deg));
+	--oui-yellow-5: light-dark(oklch(78% 0.11 95deg), oklch(60% 0.07 95deg));
+	--oui-yellow-6: light-dark(oklch(65% 0.12 94deg), oklch(70% 0.06 96deg));
+	--oui-yellow-7: light-dark(oklch(55% 0.14 93deg), oklch(80% 0.05 97deg));
+	--oui-yellow-8: light-dark(oklch(45% 0.12 92deg), oklch(85% 0.04 98deg));
+	--oui-yellow-9: light-dark(oklch(37.5% 0.11 91deg), oklch(90% 0.03 99deg));
+	--oui-yellow-10: light-dark(oklch(30% 0.09 90deg), oklch(95% 0.02 100deg));
 
-	--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-gray-0: light-dark(oklch(98% 0 0deg), oklch(22% 0 0deg));
+	--oui-gray-1: light-dark(oklch(98% 0 0deg), oklch(26% 0 0deg));
+	--oui-gray-2: light-dark(oklch(95% 0 0deg), oklch(32% 0 0deg));
+	--oui-gray-3: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
+	--oui-gray-4: light-dark(oklch(80% 0 0deg), oklch(50% 0 0deg));
+	--oui-gray-5: light-dark(oklch(70% 0 0deg), oklch(60% 0 0deg));
+	--oui-gray-6: light-dark(oklch(60% 0 0deg), oklch(70% 0 0deg));
+	--oui-gray-7: light-dark(oklch(50% 0 0deg), oklch(80% 0 0deg));
+	--oui-gray-8: light-dark(oklch(42% 0 0deg), oklch(85% 0 0deg));
+	--oui-gray-9: light-dark(oklch(35% 0 0deg), oklch(90% 0 0deg));
+	--oui-gray-10: light-dark(oklch(30% 0 0deg), oklch(95% 0 0deg));
 
-	--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-slate-0: light-dark(oklch(99% 0.0025 255deg), oklch(22% 0.005 255deg));
+	--oui-slate-1: light-dark(oklch(98% 0.005 255deg), oklch(26% 0.0075 255deg));
+	--oui-slate-2: light-dark(oklch(95% 0.0075 255deg), oklch(32% 0.01 255deg));
+	--oui-slate-3: light-dark(oklch(90% 0.01 255deg), oklch(40% 0.0125 255deg));
+	--oui-slate-4: light-dark(oklch(80% 0.015 255deg), oklch(50% 0.015 255deg));
+	--oui-slate-5: light-dark(oklch(70% 0.02 255deg), oklch(60% 0.02 255deg));
+	--oui-slate-6: light-dark(oklch(60% 0.015 255deg), oklch(70% 0.015 255deg));
+	--oui-slate-7: light-dark(oklch(50% 0.0125 255deg), oklch(80% 0.0125 255deg));
+	--oui-slate-8: light-dark(oklch(42% 0.01 255deg), oklch(85% 0.01 255deg));
+	--oui-slate-9: light-dark(oklch(35% 0.0075 255deg), oklch(90% 0.0075 255deg));
+	--oui-slate-10: light-dark(oklch(30% 0.005 255deg), oklch(95% 0.005 255deg));
 
-	--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));
+	--oui-stone-0: light-dark(oklch(99% 0.0033 95deg), oklch(22% 0.005 95deg));
+	--oui-stone-1: light-dark(oklch(98% 0.0067 95deg), oklch(26% 0.0075 95deg));
+	--oui-stone-2: light-dark(oklch(95% 0.01 95deg), oklch(32% 0.01 95deg));
+	--oui-stone-3: light-dark(oklch(90% 0.0125 95deg), oklch(40% 0.0125 95deg));
+	--oui-stone-4: light-dark(oklch(80% 0.015 95deg), oklch(50% 0.015 95deg));
+	--oui-stone-5: light-dark(oklch(70% 0.02 95deg), oklch(60% 0.02 95deg));
+	--oui-stone-6: light-dark(oklch(60% 0.015 95deg), oklch(70% 0.015 95deg));
+	--oui-stone-7: light-dark(oklch(50% 0.0125 95deg), oklch(80% 0.0125 95deg));
+	--oui-stone-8: light-dark(oklch(42% 0.01 95deg), oklch(85% 0.01 95deg));
+	--oui-stone-9: light-dark(oklch(35% 0.0075 95deg), oklch(90% 0.0075 95deg));
+	--oui-stone-10: light-dark(oklch(30% 0.005 95deg), oklch(95% 0.005 95deg));
 }

package/src/css/content.scss

@@ -3,7 +3,7 @@
 @use './mixins' as mixins;
 
 @mixin thumb($background, $shadow) {
-	@include mixins.shadow(
+	@include mixins.shadow-small(
 		color-mix(in oklab, $shadow, transparent 33%),
 		color-mix(in oklab, white, transparent 82.5%)
 	);
@@ -24,7 +24,6 @@
 	background-image: none;
 	border: 1px solid var(--oui-gray-3);
 	border-radius: 0.375em;
-	box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
 }
 
 .oui-card {
@@ -39,14 +38,12 @@
 		align-items: center;
 		list-style: none;
 		outline: 4px solid
-			color-mix(
-				in oklab,
-				var(--oui-blue-6),
-				transparent var(--oui-outline-percentage, 100%)
-			);
+			color-mix(in oklab, var(--oui-blue-6), transparent var(--oui-outline-percentage, 100%));
 		outline-offset: 0.25em;
 		border-radius: 0.125em;
-		transition: 0.125s ease-in-out, margin 0s;
+		transition:
+			0.125s ease-in-out,
+			margin 0s;
 		cursor: pointer;
 
 		&::before {
@@ -54,7 +51,7 @@
 			width: 1em;
 			height: 1em;
 			margin: 0 0.5em 0 0;
-			background-color: currentColor;
+			background-color: currentcolor;
 			mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
 			mask-size: contain;
 			mask-position: center;

package/src/css/flex.scss

@@ -15,19 +15,19 @@
 }
 
 .flow {
-	:where(&-large) {
+	:where(&-large, &--large) {
 		gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
 	}
 
-	:where(&-nowrap) {
+	:where(&-nowrap, &--nowrap) {
 		flex-wrap: nowrap;
 	}
 
-	:where(&-small) {
+	:where(&-small, &--small) {
 		gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
 	}
 
-	:where(&-text) {
+	:where(&-text, &--text) {
 		gap: var(--flow-gap-text, 1em);
 	}
 }
@@ -38,21 +38,22 @@
 }
 
 .stack {
-	:where(&-large) {
+	:where(&-large, &--large) {
 		gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
 	}
 
-	:where(&-small) {
+	:where(&-small, &--small) {
 		gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
 	}
 
-	:where(&-text) {
+	:where(&-text, &--text) {
 		gap: var(--stack-gap-text, 1em);
 	}
 }
 
 .flex {
-	&-reverse {
+	&-reverse,
+	&--reverse {
 		:where(&[class^='flow' i], &[class*=' flow' i]) {
 			flex-direction: row-reverse;
 		}
@@ -63,20 +64,20 @@
 	}
 }
 
-$alignmentOrigins: (
+$alignment-origins: (
 	c: 'content',
 	i: 'items',
 	s: 'self',
 );
 
-$alignmentValues: (
+$alignment-values: (
 	c: 'center',
 	fe: 'flex-end',
 	fs: 'flex-start',
 	s: 'stretch',
 );
 
-$justificationValues: (
+$justification-values: (
 	sa: 'space-around',
 	sb: 'space-between',
 	se: 'space-evenly',
@@ -87,20 +88,20 @@ $types: (
 	j: 'justify',
 );
 
-@each $typeKey, $typeValue in $types {
-	@each $alignmentOriginKey, $alignmentOriginValue in $alignmentOrigins {
-		.flex-#{$typeKey}#{$alignmentOriginKey} {
-			@each $alignmentValueKey, $alignmentValueValue in $alignmentValues {
-				:where(&-#{$alignmentValueKey}) {
-					#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue};
+@each $type-key, $type-value in $types {
+	@each $alignment-origin-key, $alignment-origin-value in $alignment-origins {
+		.flex-#{$type-key}#{$alignment-origin-key} {
+			@each $alignment-value-key, $alignment-value-value in $alignment-values {
+				:where(&-#{$alignment-value-key}, &--#{$alignment-value-key}) {
+					#{$type-value}-#{$alignment-origin-value}: #{$alignment-value-value};
 				}
 			}
 		}
 	}
 
-	@each $justificationKey, $justificationValue in $justificationValues {
-		:where(.flex-#{$typeKey}c-#{$justificationKey}) {
-			#{$typeValue}-content: #{$justificationValue};
+	@each $justification-key, $justification-value in $justification-values {
+		:where(.flex-#{$type-key}c-#{$justification-key}, .flex-#{$type-key}c--#{$justification-key}) {
+			#{$type-value}-content: #{$justification-value};
 		}
 	}
 }

package/src/css/form.scss

@@ -54,11 +54,7 @@
 	--oui-outline-value: var(--oui-blue-6);
 
 	outline: 4px solid
-		color-mix(
-			in oklab,
-			var(--oui-outline-value),
-			transparent var(--oui-outline-percentage)
-		);
+		color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
 	outline-offset: 0;
 	transition: 0.125s ease-in-out;
 }
@@ -77,9 +73,11 @@
 }
 
 .oui-input {
-	:where(&:not([type='range' i])) {
+	:where(&) {
 		--oui-background-value: var(--oui-absolute);
+	}
 
+	:where(&:not([type='range' i])) {
 		@include input;
 
 		padding: 0.5em 0.75em;
@@ -103,17 +101,17 @@
 	}
 
 	: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]
-				)
-		) {
+		&: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;
 	}
 
@@ -160,9 +158,9 @@
 				var(--oui-background-value),
 				transparent var(--oui-background-percentage)
 			);
-			border: 2px solid var(--oui-absolute);
+			border: 1px solid var(--oui-absolute);
 			border-radius: 1.25em;
-			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
+			box-shadow: 0 1px 2px 2px rgb(0 0 0 / 12.5%);
 			cursor: pointer;
 		}
 
@@ -174,15 +172,11 @@
 	}
 
 	:where(
-			&.oui-validatable:not(
-					[disabled],
-					[readonly],
-					[aria-disabled='true' i]
-				):is(
-					:user-invalid:not([aria-invalid='false' i]),
-					[aria-invalid='true' i]
-				)
-		) {
+		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
+				:user-invalid:not([aria-invalid='false' i]),
+				[aria-invalid='true' i]
+			)
+	) {
 		@include invalid;
 
 		&::file-selector-button {
@@ -206,12 +200,11 @@
 	}
 
 	:where(
-			&.oui-validatable:not(
-					[disabled],
-					[readonly],
-					[aria-disabled='true' i]
-				):is(:user-valid:not([aria-invalid='true' i]), [aria-invalid='false' i])
-		) {
+		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
+				:user-valid:not([aria-invalid='true' i]),
+				[aria-invalid='false' i]
+			)
+	) {
 		@include valid;
 
 		&::file-selector-button {
@@ -244,11 +237,7 @@
 
 			@media (hover: hover) {
 				&:hover {
-					outline-color: color-mix(
-						in oklab,
-						var(--oui-blue-6),
-						transparent 75%
-					);
+					outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
 				}
 			}
 
@@ -276,7 +265,7 @@
 		&::range-thumb {
 			--oui-background-value: var(--oui-blue-6);
 
-			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
+			box-shadow: 0 1px 2px 2px rgb(0 0 0 / 25%);
 		}
 	}
 
@@ -310,6 +299,12 @@
 
 			cursor: default;
 		}
+
+		&::range-thumb {
+			--oui-background-value: var(--oui-gray-2);
+
+			cursor: default;
+		}
 	}
 
 	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
@@ -378,7 +373,9 @@ select.oui-input:is([multiple]) {
 :where(textarea.oui-input) {
 	min-height: 4em;
 	resize: vertical;
-	transition: all 0.125s ease-in-out, height 0s;
+	transition:
+		all 0.125s ease-in-out,
+		height 0s;
 }
 
 :where(.oui-label, .oui-legend) {
@@ -433,19 +430,11 @@ select.oui-input:is([multiple]) {
 			transparent var(--oui-background-percentage)
 		);
 		outline: 4px solid
-			color-mix(
-				in oklab,
-				var(--oui-outline-value),
-				transparent var(--oui-outline-percentage)
-			);
+			color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
 		outline-offset: 0;
 		border: 1px solid var(--oui-border-value);
 		box-shadow: inset 0 1px 2px 0
-			color-mix(
-				in oklab,
-				var(--oui-shadow-value),
-				transparent var(--oui-shadow-percentage)
-			);
+			color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
 	}
 
 	&::after {
@@ -475,7 +464,7 @@ select.oui-input:is([multiple]) {
 			height: 1.5em;
 			background-color: var(--oui-absolute);
 			border-radius: 1.5em;
-			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
+			box-shadow: 0 1px 2px 1px rgb(0 0 0 / 12.5%);
 			font-size: 0.75em;
 			font-weight: bold;
 			line-height: 1.5em;
@@ -491,7 +480,7 @@ select.oui-input:is([multiple]) {
 
 		&::after {
 			content: attr(oui-on, '\2713');
-			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
+			box-shadow: 0 1px 2px 1px rgb(0 0 0 / 25%);
 			right: 0.25em;
 		}
 	}
@@ -528,7 +517,7 @@ select.oui-input:is([multiple]) {
 			content: attr(oui-on, '\2713');
 			width: 1.5em;
 			height: 1.5em;
-			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+			text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
 			font-weight: bold;
 			line-height: 1.5em;
 			text-align: center;
@@ -549,7 +538,7 @@ select.oui-input:is([multiple]) {
 			width: 0.75em;
 			height: 0.75em;
 			background-color: var(--oui-absolute);
-			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+			box-shadow: 0 1px 2px 0 rgb(0 0 0 / 50%);
 			inset: 0.375em auto auto 0.375em;
 		}
 	}
@@ -591,11 +580,7 @@ select.oui-input:is([multiple]) {
 			color: var(--oui-blue-8);
 		}
 
-		:where(
-				&:has(
-						input:not([disabled], [aria-disabled='true' i]):is(:checked)
-					):hover
-			) {
+		:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover) {
 			--oui-background-percentage: 50%;
 			--oui-background-value: var(--oui-blue-6);
 		}
@@ -606,7 +591,7 @@ select.oui-input:is([multiple]) {
 		--oui-background-value: var(--oui-gray-0);
 		--oui-border-value: var(--oui-gray-3);
 		--oui-foreground-percentage: 25%;
-		--oui-foreground-value: currentColor;
+		--oui-foreground-value: currentcolor;
 
 		color: color-mix(
 			in oklab,
@@ -634,5 +619,5 @@ select.oui-input:is([multiple]) {
 }
 
 :where(.oui-switch input, .oui-toggle input) {
-	@include mixins.visuallyHidden;
+	@include mixins.visually-hidden;
 }