@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/css/form.css

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 /*! https://github.com/oscarpalmer/oui */
 
+
+
+
 :where(.oui-fieldset) {
   padding: 1em;
   border: 1px solid var(--oui-gray-3);
@@ -11,19 +14,69 @@
   --oui-background-value: var(--oui-absolute);
 }
 :where(.oui-input:not([type=range i])) {
-  --oui-background-percentage: 0%;
-  --oui-foreground-percentage: 0%;
   --oui-outline-percentage: 100%;
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
   align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
   color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
   -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where(.oui-input:not([type=range i])).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]) {
+  --oui-border-value: var(--oui-red-5);
+  --oui-foreground-value: var(--oui-red-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-red-6);
+}
+:where(.oui-input:not([type=range i])).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]) {
+  --oui-border-value: var(--oui-green-5);
+  --oui-foreground-value: var(--oui-green-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-green-6);
+}
+:where(.oui-input:not([type=range i])):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where(.oui-input:not([type=range i])):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where(.oui-input:not([type=range i])):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where(.oui-input:not([type=range i])):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where(.oui-input:not([type=range i])):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where(.oui-input:not([type=range i])):is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where(.oui-input:not([type=range i])) {
   padding: 0.5em 0.75em;
   border-radius: 0.25em;
 }
@@ -48,36 +101,84 @@
 [type=week i])) {
   font-variant-numeric: tabular-nums;
 }
+:where(.oui-input:is([type=date i], [type=datetime-local i], [type=month i], [type=week i]))::-webkit-calendar-picker-indicator {
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 2px;
+  border-radius: 1em;
+  -webkit-transition: outline 0.125s ease-in-out;
+  transition: outline 0.125s ease-in-out;
+  cursor: pointer;
+}
+:where(.oui-input:is([type=date i], [type=datetime-local i], [type=month i], [type=week i]))::-webkit-calendar-picker-indicator:focus-within {
+  --oui-outline-percentage: 62.5%;
+}
+@media (hover: hover) {
+  :where(.oui-input:is([type=date i], [type=datetime-local i], [type=month i], [type=week i]))::-webkit-calendar-picker-indicator:hover {
+    --oui-outline-percentage: 85%;
+  }
+}
 :where(.oui-input:is([type=file i])) {
   padding-left: 0.5em;
 }
 :where(.oui-input:is([type=file i]))::file-selector-button {
   --oui-background-percentage: 25%;
+  --oui-background-value: var(--oui-gray-2);
   --oui-foreground-percentage: 0%;
+  --oui-foreground-value: var(--oui-gray-8);
   --oui-outline-percentage: 100%;
-  --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
+  --oui-outline-value: var(--oui-gray-6);
+  --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
   --oui-shadow-percentage: 82.5%;
   --oui-shadow-value: color-mix(
   	in oklab,
-  	var(--oui-outline-value, var(--oui-gray-6)),
+  	var(--oui-outline-value),
   	transparent var(--oui-shadow-percentage)
   );
-  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value), 0 4px 8px -2px var(--oui-shadow-value);
   padding: 0.5em 0.75em;
   display: inline-flex;
   flex-flow: row wrap;
   gap: 0.75em;
   align-items: center;
   border-radius: 0.25em;
-  background-color: color-mix(in oklab, var(--oui-background-value, var(--oui-gray-2)), transparent var(--oui-background-percentage));
-  outline: 4px solid color-mix(in oklab, var(--oui-outline-value, var(--oui-gray-6)), transparent var(--oui-outline-percentage));
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   border: none;
-  color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
+  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
   line-height: 1.25;
   transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+: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;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button[disabled], :where(.oui-input:is([type=file i]))::file-selector-button[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button {
   --oui-background-value: var(--oui-grey-2);
   --oui-outline-value: var(--oui-grey-6);
   margin: 0 0.75em 0 0;
+  outline: none;
   font-size: 0.75em;
   cursor: pointer;
 }
@@ -88,19 +189,69 @@
   outline: none;
 }
 :where(.oui-input:is([type=range i]))::-moz-range-track {
-  --oui-background-percentage: 0%;
-  --oui-foreground-percentage: 0%;
   --oui-outline-percentage: 100%;
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
   align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
   color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
   -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where(.oui-input:is([type=range i]))::-moz-range-track.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]) {
+  --oui-border-value: var(--oui-red-5);
+  --oui-foreground-value: var(--oui-red-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-red-6);
+}
+:where(.oui-input:is([type=range i]))::-moz-range-track.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]) {
+  --oui-border-value: var(--oui-green-5);
+  --oui-foreground-value: var(--oui-green-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-green-6);
+}
+:where(.oui-input:is([type=range i]))::-moz-range-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where(.oui-input:is([type=range i]))::-moz-range-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where(.oui-input:is([type=range i]))::-moz-range-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where(.oui-input:is([type=range i]))::-moz-range-track:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where(.oui-input:is([type=range i]))::-moz-range-track:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where(.oui-input:is([type=range i]))::-moz-range-track:is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where(.oui-input:is([type=range i]))::-moz-range-track {
   -moz-appearance: none;
   appearance: none;
   width: 100%;
@@ -109,19 +260,69 @@
   position: relative;
 }
 :where(.oui-input:is([type=range i]))::-ms-track {
-  --oui-background-percentage: 0%;
-  --oui-foreground-percentage: 0%;
   --oui-outline-percentage: 100%;
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
   align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
   color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
   -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where(.oui-input:is([type=range i]))::-ms-track.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]) {
+  --oui-border-value: var(--oui-red-5);
+  --oui-foreground-value: var(--oui-red-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-red-6);
+}
+:where(.oui-input:is([type=range i]))::-ms-track.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]) {
+  --oui-border-value: var(--oui-green-5);
+  --oui-foreground-value: var(--oui-green-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-green-6);
+}
+:where(.oui-input:is([type=range i]))::-ms-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where(.oui-input:is([type=range i]))::-ms-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where(.oui-input:is([type=range i]))::-ms-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where(.oui-input:is([type=range i]))::-ms-track:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where(.oui-input:is([type=range i]))::-ms-track:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where(.oui-input:is([type=range i]))::-ms-track:is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where(.oui-input:is([type=range i]))::-ms-track {
   appearance: none;
   width: 100%;
   height: 0.75em;
@@ -129,19 +330,69 @@
   position: relative;
 }
 :where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track {
-  --oui-background-percentage: 0%;
-  --oui-foreground-percentage: 0%;
   --oui-outline-percentage: 100%;
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
   align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
   color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
   -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]) {
+  --oui-border-value: var(--oui-red-5);
+  --oui-foreground-value: var(--oui-red-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-red-6);
+}
+:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]) {
+  --oui-border-value: var(--oui-green-5);
+  --oui-foreground-value: var(--oui-green-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-green-6);
+}
+:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track:is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
@@ -156,7 +407,6 @@
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
   -moz-appearance: none;
   appearance: none;
   width: 1.25em;
@@ -174,7 +424,6 @@
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
   appearance: none;
   width: 1.25em;
   height: 1.25em;
@@ -191,7 +440,6 @@
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
   -webkit-appearance: none;
   appearance: none;
   width: 1.25em;
@@ -207,220 +455,241 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i])) {
-  --oui-border-value: var(--oui-red-5);
-  --oui-foreground-value: var(--oui-red-9);
-  --oui-outline-percentage: 82.5%;
-  --oui-outline-value: var(--oui-red-6);
-}
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i]))::file-selector-button {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]))::file-selector-button {
   --oui-background-value: var(--oui-red-2);
   --oui-foreground-value: var(--oui-red-8);
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i]))::-moz-range-thumb {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i]))::-ms-thumb {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]))::-ms-thumb {
   --oui-background-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i]))::-webkit-slider-thumb {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]))::-webkit-slider-thumb {
   --oui-background-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i]))::-moz-range-track {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]))::-moz-range-track {
   --oui-border-value: var(--oui-red-5);
   --oui-foreground-value: var(--oui-red-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i]))::-ms-track {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]))::-ms-track {
   --oui-border-value: var(--oui-red-5);
   --oui-foreground-value: var(--oui-red-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i]))::-webkit-slider-runnable-track {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]))::-webkit-slider-runnable-track {
   --oui-border-value: var(--oui-red-5);
   --oui-foreground-value: var(--oui-red-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
-[aria-invalid=true i])) > option:checked {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i])) > option:checked {
   background-color: var(--oui-red-2);
   color: var(--oui-red-9);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i])) {
-  --oui-border-value: var(--oui-green-5);
-  --oui-foreground-value: var(--oui-green-9);
-  --oui-outline-percentage: 82.5%;
-  --oui-outline-value: var(--oui-green-6);
-}
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i]))::file-selector-button {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::file-selector-button {
   --oui-background-value: var(--oui-green-2);
   --oui-foreground-value: var(--oui-green-8);
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i]))::-moz-range-track {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-track {
   --oui-border-value: var(--oui-green-5);
   --oui-foreground-value: var(--oui-green-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i]))::-ms-track {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-track {
   --oui-border-value: var(--oui-green-5);
   --oui-foreground-value: var(--oui-green-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i]))::-webkit-slider-runnable-track {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-runnable-track {
   --oui-border-value: var(--oui-green-5);
   --oui-foreground-value: var(--oui-green-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i]))::-moz-range-thumb {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i]))::-ms-thumb {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-thumb {
   --oui-background-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i]))::-webkit-slider-thumb {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-thumb {
   --oui-background-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
-[aria-invalid=false i])) > option:checked {
+:where(.oui-input.oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) > option:checked {
   background-color: var(--oui-green-2);
   color: var(--oui-green-9);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator {
-  outline: 4px solid transparent;
-  outline-offset: 2px;
-  border-radius: 2em;
-  -webkit-transition: 0.125s ease-in-out;
-  transition: 0.125s ease-in-out;
-  cursor: pointer;
-}
-@media (hover: hover) {
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator:hover {
-    outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
-  }
-}
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator:focus {
-  outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
-}
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus), :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within) {
-  --oui-border-value: var(--oui-blue-5);
-  --oui-foreground-value: inherit;
-  --oui-outline-percentage: 75%;
-  --oui-outline-value: var(--oui-blue-6);
-}
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::file-selector-button, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::file-selector-button {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::file-selector-button {
   --oui-background-value: var(--oui-blue-2);
   --oui-foreground-value: var(--oui-blue-8);
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-thumb {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-moz-range-thumb {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-thumb {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-ms-thumb {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-thumb {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-webkit-slider-thumb {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-track {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-moz-range-track {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-track {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-ms-track {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-runnable-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-runnable-track {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-webkit-slider-runnable-track {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-thumb {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-moz-range-thumb {
   --oui-background-value: var(--oui-blue-6);
   box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-thumb {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-ms-thumb {
   --oui-background-value: var(--oui-blue-6);
   box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
 }
-:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-thumb {
+:where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, .oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within)::-webkit-slider-thumb {
   --oui-background-value: var(--oui-blue-6);
   box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
 }
 @media (hover: hover) {
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover) {
-    --oui-border-value: var(--oui-blue-4);
-    --oui-foreground-percentage: 0%;
-    --oui-foreground-value: inherit;
-    --oui-outline-percentage: 90%;
-    --oui-outline-value: var(--oui-blue-6);
-  }
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::file-selector-button {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover)::file-selector-button {
     --oui-background-value: var(--oui-blue-2);
     --oui-foreground-value: var(--oui-blue-8);
     --oui-outline-value: var(--oui-blue-6);
   }
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-thumb {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover)::-moz-range-thumb {
     --oui-background-value: var(--oui-blue-5);
   }
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-thumb {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover)::-ms-thumb {
     --oui-background-value: var(--oui-blue-5);
   }
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-thumb {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover)::-webkit-slider-thumb {
     --oui-background-value: var(--oui-blue-5);
   }
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-track {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover)::-moz-range-track {
     --oui-border-value: var(--oui-blue-4);
     --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
     --oui-outline-percentage: 90%;
     --oui-outline-value: var(--oui-blue-6);
   }
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-track {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover)::-ms-track {
     --oui-border-value: var(--oui-blue-4);
     --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
     --oui-outline-percentage: 90%;
     --oui-outline-value: var(--oui-blue-6);
   }
-  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-runnable-track {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover)::-webkit-slider-runnable-track {
     --oui-border-value: var(--oui-blue-4);
     --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
@@ -428,31 +697,34 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i])) {
-  --oui-foreground-percentage: 25%;
-  font-style: italic;
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]))::-webkit-calendar-picker-indicator:focus-within {
+  --oui-outline-percentage: 0%;
+  --oui-outline-value: var(--oui-gray-3);
 }
-:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::file-selector-button {
+@media (hover: hover) {
+  :where(.oui-input:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]))::-webkit-calendar-picker-indicator:hover {
+    --oui-outline-percentage: 0%;
+    --oui-outline-value: var(--oui-gray-3);
+  }
+}
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]))::file-selector-button {
   --oui-background-value: var(--oui-gray-1);
   cursor: default;
 }
-:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::-moz-range-thumb {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-gray-2);
   cursor: default;
 }
-:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::-ms-thumb {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]))::-ms-thumb {
   --oui-background-value: var(--oui-gray-2);
   cursor: default;
 }
-:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::-webkit-slider-thumb {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]))::-webkit-slider-thumb {
   --oui-background-value: var(--oui-gray-2);
   cursor: default;
 }
-:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]):focus) {
-  --oui-outline-percentage: 75%;
-}
-:where(.oui-input:is([disabled], [aria-disabled=true i])) {
-  --oui-background-percentage: 50%;
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-webkit-calendar-picker-indicator {
+  opacity: 0.5;
 }
 :where(.oui-input:is([disabled], [aria-disabled=true i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-gray-1);
@@ -478,9 +750,6 @@
   --oui-background-percentage: 50%;
   --oui-background-value: var(--oui-gray-0);
 }
-:where(.oui-input:is([disabled], [aria-disabled=true i]))::-webkit-calendar-picker-indicator {
-  opacity: 0.5;
-}
 
 :where(select.oui-input, .oui-input[list]) {
   padding-right: 2em;
@@ -520,11 +789,12 @@
 :where(.oui-label, .oui-legend) {
   font-size: 0.875rem;
   font-weight: bold;
+  align-self: flex-start;
 }
 
 :where(.oui-label) {
   cursor: pointer;
-  transition: 0.125s ease-in-out;
+  transition: color 0.125s ease-in-out;
 }
 @media (hover: hover) {
   :where(.oui-label[for]:hover) {
@@ -556,6 +826,7 @@
   font-family: system-ui, sans-serif;
   position: absolute;
   transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
   pointer-events: none;
 }
 :where(.oui-switch, .oui-toggle)::before {