@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/css/color.css

@@ -1,105 +1,105 @@
 /*! https://github.com/oscarpalmer/oui */
 :root {
   --oui-absolute: light-dark(white, black);
-  --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-0: light-dark(oklch(98.5% 0.01 260deg), oklch(20% 0.07 250deg));
+  --oui-blue-1: light-dark(oklch(96% 0.02 259deg), oklch(25% 0.09 251deg));
+  --oui-blue-2: light-dark(oklch(92% 0.03 258deg), oklch(32% 0.1 252deg));
+  --oui-blue-3: light-dark(oklch(87% 0.04 257deg), oklch(40% 0.11 253deg));
+  --oui-blue-4: light-dark(oklch(80% 0.06 256deg), oklch(50% 0.1 254deg));
+  --oui-blue-5: light-dark(oklch(70% 0.08 255deg), oklch(60% 0.08 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(99.5% 0.01 150deg), oklch(20% 0.08 140deg));
-  --oui-green-1: light-dark(oklch(98.25% 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-blue-7: light-dark(oklch(50% 0.12 253deg), oklch(80% 0.04 257deg));
+  --oui-blue-8: light-dark(oklch(40% 0.11 252deg), oklch(87% 0.03 258deg));
+  --oui-blue-9: light-dark(oklch(32% 0.1 251deg), oklch(92% 0.02 259deg));
+  --oui-blue-10: light-dark(oklch(25% 0.09 250deg), oklch(96% 0.01 260deg));
+  --oui-green-0: light-dark(oklch(98.5% 0.01 150deg), oklch(20% 0.07 140deg));
+  --oui-green-1: light-dark(oklch(96% 0.02 149deg), oklch(25% 0.09 141deg));
+  --oui-green-2: light-dark(oklch(92% 0.03 148deg), oklch(32% 0.1 142deg));
+  --oui-green-3: light-dark(oklch(87% 0.04 147deg), oklch(40% 0.11 143deg));
+  --oui-green-4: light-dark(oklch(80% 0.06 146deg), oklch(50% 0.1 144deg));
+  --oui-green-5: light-dark(oklch(70% 0.08 145deg), oklch(60% 0.08 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(99.5% 0.02 60deg), oklch(20% 0.08 50deg));
-  --oui-orange-1: light-dark(oklch(98.75% 0.035 59deg), oklch(25% 0.09 51deg));
-  --oui-orange-2: light-dark(oklch(97.5% 0.05 58deg), oklch(32% 0.1 52deg));
-  --oui-orange-3: light-dark(oklch(93.25% 0.07 57deg), oklch(40% 0.09 53deg));
-  --oui-orange-4: light-dark(oklch(87.125% 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(99.5% 0.02 300deg), oklch(20% 0.08 290deg));
-  --oui-purple-1: light-dark(oklch(98.25% 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(99.5% 0.024 25deg), oklch(20% 0.08 25deg));
-  --oui-red-1: light-dark(oklch(98.75% 0.032 24deg), oklch(25% 0.09 24deg));
-  --oui-red-2: light-dark(oklch(97.5% 0.05 23deg), oklch(32% 0.1 23deg));
-  --oui-red-3: light-dark(oklch(93.25% 0.07 22deg), oklch(40% 0.09 22deg));
-  --oui-red-4: light-dark(oklch(87.125% 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(99.5% 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.25% 0.05 98deg), oklch(32% 0.1 92deg));
-  --oui-yellow-3: light-dark(oklch(93.125% 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(98% 0 0deg), oklch(22% 0 0deg));
-  --oui-gray-1: light-dark(oklch(97% 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-green-7: light-dark(oklch(50% 0.12 143deg), oklch(80% 0.04 147deg));
+  --oui-green-8: light-dark(oklch(40% 0.11 142deg), oklch(87% 0.03 148deg));
+  --oui-green-9: light-dark(oklch(32% 0.1 141deg), oklch(92% 0.02 149deg));
+  --oui-green-10: light-dark(oklch(25% 0.09 140deg), oklch(96% 0.01 150deg));
+  --oui-orange-0: light-dark(oklch(99% 0.02 60deg), oklch(20% 0.07 50deg));
+  --oui-orange-1: light-dark(oklch(97.5% 0.035 59deg), oklch(25% 0.09 51deg));
+  --oui-orange-2: light-dark(oklch(94% 0.05 58deg), oklch(32% 0.1 52deg));
+  --oui-orange-3: light-dark(oklch(89% 0.07 57deg), oklch(40% 0.11 53deg));
+  --oui-orange-4: light-dark(oklch(80% 0.1 56deg), oklch(50% 0.12 54deg));
+  --oui-orange-5: light-dark(oklch(70% 0.11 55deg), oklch(60% 0.11 55deg));
+  --oui-orange-6: light-dark(oklch(60% 0.12 54deg), oklch(70% 0.1 56deg));
+  --oui-orange-7: light-dark(oklch(50% 0.14 53deg), oklch(80% 0.07 57deg));
+  --oui-orange-8: light-dark(oklch(40% 0.12 52deg), oklch(89% 0.05 58deg));
+  --oui-orange-9: light-dark(oklch(32% 0.11 51deg), oklch(94% 0.035 59deg));
+  --oui-orange-10: light-dark(oklch(25% 0.09 50deg), oklch(97.5% 0.02 60deg));
+  --oui-purple-0: light-dark(oklch(98.5% 0.02 300deg), oklch(20% 0.07 290deg));
+  --oui-purple-1: light-dark(oklch(96.5% 0.035 299deg), oklch(25% 0.09 291deg));
+  --oui-purple-2: light-dark(oklch(93% 0.05 298deg), oklch(32% 0.1 292deg));
+  --oui-purple-3: light-dark(oklch(88% 0.07 297deg), oklch(40% 0.11 293deg));
+  --oui-purple-4: light-dark(oklch(80% 0.1 296deg), oklch(50% 0.12 294deg));
+  --oui-purple-5: light-dark(oklch(70% 0.11 295deg), oklch(60% 0.11 295deg));
+  --oui-purple-6: light-dark(oklch(60% 0.12 294deg), oklch(70% 0.1 296deg));
+  --oui-purple-7: light-dark(oklch(50% 0.14 293deg), oklch(80% 0.07 297deg));
+  --oui-purple-8: light-dark(oklch(40% 0.12 292deg), oklch(88% 0.05 298deg));
+  --oui-purple-9: light-dark(oklch(32% 0.11 291deg), oklch(93% 0.035 299deg));
+  --oui-purple-10: light-dark(oklch(25% 0.09 290deg), oklch(96.5% 0.02 300deg));
+  --oui-red-0: light-dark(oklch(99% 0.024 25deg), oklch(20% 0.07 15deg));
+  --oui-red-1: light-dark(oklch(97% 0.032 24deg), oklch(25% 0.09 16deg));
+  --oui-red-2: light-dark(oklch(93% 0.05 23deg), oklch(32% 0.1 17deg));
+  --oui-red-3: light-dark(oklch(87% 0.07 22deg), oklch(40% 0.11 18deg));
+  --oui-red-4: light-dark(oklch(80% 0.1 21deg), oklch(50% 0.12 19deg));
+  --oui-red-5: light-dark(oklch(70% 0.11 20deg), oklch(60% 0.11 20deg));
+  --oui-red-6: light-dark(oklch(60% 0.12 19deg), oklch(70% 0.1 21deg));
+  --oui-red-7: light-dark(oklch(50% 0.14 18deg), oklch(80% 0.07 22deg));
+  --oui-red-8: light-dark(oklch(40% 0.12 17deg), oklch(87% 0.05 23deg));
+  --oui-red-9: light-dark(oklch(32% 0.11 16deg), oklch(93% 0.032 24deg));
+  --oui-red-10: light-dark(oklch(25% 0.09 15deg), oklch(97% 0.024 25deg));
+  --oui-yellow-0: light-dark(oklch(98.75% 0.02 100deg), oklch(20% 0.07 90deg));
+  --oui-yellow-1: light-dark(oklch(97% 0.04 99deg), oklch(25% 0.09 91deg));
+  --oui-yellow-2: light-dark(oklch(94% 0.06 98deg), oklch(32% 0.1 92deg));
+  --oui-yellow-3: light-dark(oklch(89% 0.08 97deg), oklch(40% 0.11 93deg));
+  --oui-yellow-4: light-dark(oklch(80% 0.1 96deg), oklch(50% 0.12 94deg));
+  --oui-yellow-5: light-dark(oklch(70% 0.11 95deg), oklch(60% 0.11 95deg));
+  --oui-yellow-6: light-dark(oklch(60% 0.12 94deg), oklch(70% 0.1 96deg));
+  --oui-yellow-7: light-dark(oklch(50% 0.14 93deg), oklch(80% 0.07 97deg));
+  --oui-yellow-8: light-dark(oklch(40% 0.12 92deg), oklch(89% 0.05 98deg));
+  --oui-yellow-9: light-dark(oklch(32% 0.11 91deg), oklch(94% 0.035 99deg));
+  --oui-yellow-10: light-dark(oklch(25% 0.09 90deg), oklch(97.5% 0.02 100deg));
+  --oui-gray-0: light-dark(oklch(98.5% 0 0deg), oklch(20% 0 0deg));
+  --oui-gray-1: light-dark(oklch(96% 0 0deg), oklch(25% 0 0deg));
+  --oui-gray-2: light-dark(oklch(92% 0 0deg), oklch(32% 0 0deg));
+  --oui-gray-3: light-dark(oklch(87% 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(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-gray-8: light-dark(oklch(40% 0 0deg), oklch(87% 0 0deg));
+  --oui-gray-9: light-dark(oklch(32% 0 0deg), oklch(92% 0 0deg));
+  --oui-gray-10: light-dark(oklch(25% 0 0deg), oklch(96% 0 0deg));
+  --oui-slate-0: light-dark(oklch(98.5% 0.0025 255deg), oklch(20% 0.005 255deg));
+  --oui-slate-1: light-dark(oklch(96% 0.005 255deg), oklch(25% 0.0075 255deg));
+  --oui-slate-2: light-dark(oklch(92% 0.0075 255deg), oklch(32% 0.01 255deg));
+  --oui-slate-3: light-dark(oklch(87% 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(99.5% 0.0033 95deg), oklch(22% 0.005 95deg));
-  --oui-stone-1: light-dark(oklch(98.25% 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-slate-7: light-dark(oklch(50% 0.0125 255deg), oklch(80% 0.01 255deg));
+  --oui-slate-8: light-dark(oklch(40% 0.01 255deg), oklch(87% 0.0075 255deg));
+  --oui-slate-9: light-dark(oklch(32% 0.0075 255deg), oklch(92% 0.005 255deg));
+  --oui-slate-10: light-dark(oklch(25% 0.005 255deg), oklch(96% 0.0025 255deg));
+  --oui-stone-0: light-dark(oklch(98.5% 0.0033 95deg), oklch(20% 0.005 95deg));
+  --oui-stone-1: light-dark(oklch(96% 0.0067 95deg), oklch(25% 0.0075 95deg));
+  --oui-stone-2: light-dark(oklch(92% 0.01 95deg), oklch(32% 0.01 95deg));
+  --oui-stone-3: light-dark(oklch(87% 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));
+  --oui-stone-8: light-dark(oklch(40% 0.01 95deg), oklch(87% 0.01 95deg));
+  --oui-stone-9: light-dark(oklch(32% 0.0075 95deg), oklch(92% 0.0067 95deg));
+  --oui-stone-10: light-dark(oklch(25% 0.005 95deg), oklch(96% 0.0033 95deg));
 }
 
 

package/dist/css/combobox.css

@@ -133,7 +133,7 @@
   --margin-top: 0;
 }
 :where([oui-combobox-content]) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 4px 8px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 8px 16px -4px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 16px 32px -8px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 32px 64px -16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 64px 128px -32px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
   width: -moz-fit-content;
   width: fit-content;
   height: -moz-fit-content;
@@ -278,8 +278,11 @@
   line-height: 1.25;
   cursor: pointer;
 }
+:where(oui-combobox:has([oui-combobox-header]) [oui-combobox-option]) {
+  scroll-margin-top: 2em;
+}
 :where([oui-combobox-option][aria-selected=true i]) {
-  background-color: var(--oui-blue-3);
+  background-color: var(--oui-blue-2);
   color: var(--oui-blue-9);
 }
 :where(oui-combobox[multiple] [oui-combobox-option][aria-selected=true i])::before {
@@ -313,12 +316,12 @@
 }
 
 :where([oui-combobox-selection-item]) {
-  --oui-background-percentage: 25%;
+  --oui-background-percentage: 50%;
   --oui-background-value: var(--oui-gray-2);
   --oui-foreground-percentage: 0%;
   --oui-foreground-value: var(--oui-gray-8);
   --oui-outline-percentage: 100%;
-  --oui-outline-value: var(--oui-gray-6);
+  --oui-outline-value: var(--oui-gray-5);
   --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
   --oui-shadow-percentage: 82.5%;
   --oui-shadow-value: color-mix(
@@ -338,9 +341,42 @@
   border: none;
   color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
   line-height: 1.25;
+  position: relative;
   transition: 0.125s ease-in-out;
   transition-property: background, outline, box-shadow, color;
 }
+:where([oui-combobox-selection-item])::after {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  opacity: 0;
+  background-color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  -webkit-mask-image: url("");
+  mask-image: url("");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1em 1em;
+  mask-size: 1em 1em;
+  pointer-events: none;
+  transition: 0.125s ease-in-out;
+  transition-property: background-color, color, opacity, -webkit-mask-image;
+  transition-property: background-color, color, mask-image, opacity;
+  transition-property: background-color, color, mask-image, opacity, -webkit-mask-image;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+:where([oui-combobox-selection-item]):has(.oui-icon:is(:first-child))::after {
+  inset: auto;
+  transform: none;
+}
+:where([oui-combobox-selection-item]):has(.oui-icon:is(:last-child))::after {
+  inset: auto 0.75em auto auto;
+  transform: none;
+}
 :where([oui-combobox-selection-item]):focus-visible {
   --oui-outline-percentage: 75%;
 }
@@ -351,6 +387,57 @@
     --oui-shadow-percentage: 90%;
   }
 }
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=busy i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=error i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=loading i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=success i]:not(:has(.oui-icon:is(:first-child, :last-child))) {
+  color: transparent;
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=error i]::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  opacity: 1;
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[aria-busy=true i] .oui-icon, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=busy i] .oui-icon, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=error i] .oui-icon, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=loading i] .oui-icon, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=success i] .oui-icon {
+  opacity: 0;
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[aria-busy=true i], :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=busy i], :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=loading i] {
+  --oui-background-value: var(--oui-blue-2);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-5);
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  transform-origin: center;
+  animation: oui-button-icon-centered 1s linear infinite;
+}
+@keyframes oui-button-icon-centered {
+  to {
+    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=busy i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=loading i]:has(.oui-icon:is(:first-child, :last-child))::after {
+  animation: oui-button-icon-offset 1s linear infinite;
+}
+@keyframes oui-button-icon-offset {
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=error i] {
+  --oui-background-value: var(--oui-red-2);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-value: var(--oui-red-5);
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=error i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=success i] {
+  --oui-background-value: var(--oui-green-2);
+  --oui-foreground-value: var(--oui-green-8);
+  --oui-outline-value: var(--oui-green-5);
+}
+:where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+}
 :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i]):active {
   box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
   scale: 0.95;
@@ -364,6 +451,13 @@
   --oui-shadow-percentage: 92.5%;
   font-style: italic;
 }
+:where([oui-combobox-selection-item]) .oui-icon {
+  width: 1em;
+  height: 1em;
+}
+:where([oui-combobox-selection-item]) .oui-icon:is(:first-child, :last-child) {
+  transition: opacity 0.125s ease-in-out;
+}
 :where([oui-combobox-selection-item]) {
   --oui-background-value: var(--oui-blue-2);
   --oui-foreground-value: var(--oui-blue-8);

package/dist/css/content.css

@@ -6,6 +6,7 @@
   padding: 1em 1.25em;
   background-color: var(--oui-absolute);
   border-radius: 0.5em;
+  --stack-gap: 1em;
 }
 
 :where(.oui-details > summary) {
@@ -190,22 +191,22 @@
 }
 
 :where(.oui-shadow), :where(.oui-shadow-0) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
 }
 :where(.oui-shadow-1) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
 }
 :where(.oui-shadow-2) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 4px 8px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
 }
 :where(.oui-shadow-3) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 4px 8px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 8px 16px -4px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
 }
 :where(.oui-shadow-4) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 4px 8px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 8px 16px -4px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 16px 32px -8px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
 }
 :where(.oui-shadow-5) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 4px 8px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 8px 16px -4px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 16px 32px -8px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 32px 64px -16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 64px 128px -32px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
 }
 
 

package/dist/css/floatable.css

@@ -9,7 +9,7 @@
 }
 
 :where([oui-dialog], [oui-popover], [oui-tooltip-content]) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 4px 8px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 8px 16px -4px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 16px 32px -8px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 32px 64px -16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 64px 128px -32px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
   background-color: var(--oui-absolute);
   scale: 0.9;
 }
@@ -64,7 +64,6 @@
 
 :where([oui-popover]) {
   padding: 1rem;
-  background-color: var(--oui-absolute);
   border-radius: 0.25rem;
 }
 
@@ -97,7 +96,6 @@ var)) {
 :where([oui-tooltip-content]) {
   max-width: 48ch;
   padding: 0.75em 1em;
-  background-color: var(--oui-absolute);
   border-radius: 0.25rem;
   font-size: 0.875rem;
   pointer-events: none;

package/dist/css/form.css

@@ -123,12 +123,12 @@
   padding-left: 0.5em;
 }
 :where(.oui-input:is([type=file i]))::file-selector-button {
-  --oui-background-percentage: 25%;
+  --oui-background-percentage: 50%;
   --oui-background-value: var(--oui-gray-2);
   --oui-foreground-percentage: 0%;
   --oui-foreground-value: var(--oui-gray-8);
   --oui-outline-percentage: 100%;
-  --oui-outline-value: var(--oui-gray-6);
+  --oui-outline-value: var(--oui-gray-5);
   --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
   --oui-shadow-percentage: 82.5%;
   --oui-shadow-value: color-mix(
@@ -148,9 +148,42 @@
   border: none;
   color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
   line-height: 1.25;
+  position: relative;
   transition: 0.125s ease-in-out;
   transition-property: background, outline, box-shadow, color;
 }
+:where(.oui-input:is([type=file i]))::file-selector-button::after {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  opacity: 0;
+  background-color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  -webkit-mask-image: url("");
+  mask-image: url("");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1em 1em;
+  mask-size: 1em 1em;
+  pointer-events: none;
+  transition: 0.125s ease-in-out;
+  transition-property: background-color, color, opacity, -webkit-mask-image;
+  transition-property: background-color, color, mask-image, opacity;
+  transition-property: background-color, color, mask-image, opacity, -webkit-mask-image;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:has(.oui-icon:is(:first-child))::after {
+  inset: auto;
+  transform: none;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:has(.oui-icon:is(:last-child))::after {
+  inset: auto 0.75em auto auto;
+  transform: none;
+}
 :where(.oui-input:is([type=file i]))::file-selector-button:focus-visible {
   --oui-outline-percentage: 75%;
 }
@@ -161,6 +194,57 @@
     --oui-shadow-percentage: 90%;
   }
 }
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[aria-busy=true i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=busy i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=error i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=loading i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=success i]:not(:has(.oui-icon:is(:first-child, :last-child))) {
+  color: transparent;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=error i]::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=loading i]::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  opacity: 1;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[aria-busy=true i] .oui-icon, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=busy i] .oui-icon, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=error i] .oui-icon, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=loading i] .oui-icon, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=success i] .oui-icon {
+  opacity: 0;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[aria-busy=true i], :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=busy i], :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=loading i] {
+  --oui-background-value: var(--oui-blue-2);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-5);
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=loading i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  transform-origin: center;
+  animation: oui-button-icon-centered 1s linear infinite;
+}
+@keyframes oui-button-icon-centered {
+  to {
+    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[aria-busy=true i]:has(.oui-icon:is(:first-child, :last-child))::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=busy i]:has(.oui-icon:is(:first-child, :last-child))::after, :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=loading i]:has(.oui-icon:is(:first-child, :last-child))::after {
+  animation: oui-button-icon-offset 1s linear infinite;
+}
+@keyframes oui-button-icon-offset {
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=error i] {
+  --oui-background-value: var(--oui-red-2);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-value: var(--oui-red-5);
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=error i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=success i] {
+  --oui-background-value: var(--oui-green-2);
+  --oui-foreground-value: var(--oui-green-8);
+  --oui-outline-value: var(--oui-green-5);
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+}
 :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i]):active {
   box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
   scale: 0.95;
@@ -174,6 +258,13 @@
   --oui-shadow-percentage: 92.5%;
   font-style: italic;
 }
+:where(.oui-input:is([type=file i]))::file-selector-button .oui-icon {
+  width: 1em;
+  height: 1em;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button .oui-icon:is(:first-child, :last-child) {
+  transition: opacity 0.125s ease-in-out;
+}
 :where(.oui-input:is([type=file i]))::file-selector-button {
   --oui-background-value: var(--oui-grey-2);
   --oui-outline-value: var(--oui-grey-6);
@@ -790,14 +881,11 @@
   font-size: 0.875rem;
   font-weight: bold;
   align-self: flex-start;
-}
-
-:where(.oui-label) {
   cursor: pointer;
   transition: color 0.125s ease-in-out;
 }
 @media (hover: hover) {
-  :where(.oui-label[for]:hover) {
+  :where(:where(.oui-label, .oui-legend):hover) {
     color: var(--oui-blue-8);
   }
 }
@@ -863,6 +951,7 @@
   text-align: center;
   top: 0.25em;
   right: 1.5em;
+  transition: right 0.125s ease-in-out;
 }
 :where(.oui-switch:has(input:checked)) {
   --oui-foreground-percentage: 0%;
@@ -873,6 +962,10 @@
   box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
   right: 0.25em;
 }
+:where(.oui-switch:has(input:active))::after {
+  content: "";
+  right: 1em;
+}
 
 :where(.oui-toggle) {
   --oui-background-percentage: 100%;