@oscarpalmer/oui 0.11.0 → 0.12.0

package/dist/css/form.css

@@ -18,8 +18,9 @@
   transition: 0.125s ease-in-out;
   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 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 75%);
+  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));
   padding: 0.5em 0.75em;
   border-radius: 0.25em;
 }
@@ -51,12 +52,14 @@
   --oui-background-percentage: 25%;
   --oui-foreground-percentage: 0%;
   --oui-outline-percentage: 100%;
-  --oui-shadow-percentage: 85%;
+  --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
+  --oui-shadow-percentage: 82.5%;
   --oui-shadow-value: color-mix(
-  	in oklch,
+  	in oklab,
   	var(--oui-outline-value, var(--oui-gray-6)),
   	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);
   padding: 0.5em 0.75em;
   display: inline-flex;
   flex-flow: row wrap;
@@ -66,10 +69,10 @@
   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));
   border: none;
-  box-shadow: 0 0 0 1px var(--oui-shadow-value), 0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
   color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
   line-height: 1.25;
   transition: 0.125s ease-in-out;
+  --oui-background-value: var(--oui-grey-2);
   --oui-outline-value: var(--oui-grey-6);
   margin: 0 0.75em 0 0;
   font-size: 0.75em;
@@ -91,8 +94,9 @@
   transition: 0.125s ease-in-out;
   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 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 75%);
+  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));
   -moz-appearance: none;
   appearance: none;
   width: 100%;
@@ -110,8 +114,9 @@
   transition: 0.125s ease-in-out;
   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 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 75%);
+  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));
   appearance: none;
   width: 100%;
   height: 0.75em;
@@ -128,8 +133,9 @@
   transition: 0.125s ease-in-out;
   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 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 75%);
+  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));
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
@@ -195,82 +201,135 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i])) {
-  --oui-border-value: var(--oui-red-6);
+:where(.oui-input.oui-validatable: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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i]))::file-selector-button {
-  --oui-background-value: var(--oui-red-1);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i]))::-moz-range-thumb {
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i]))::-ms-thumb {
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i]))::-webkit-slider-thumb {
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i]))::-moz-range-track {
-  --oui-border-value: var(--oui-red-6);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i]))::-ms-track {
-  --oui-border-value: var(--oui-red-6);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid, [aria-invalid=true i]))::-webkit-slider-runnable-track {
-  --oui-border-value: var(--oui-red-6);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i])) {
-  --oui-border-value: var(--oui-green-6);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable: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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i]))::file-selector-button {
-  --oui-background-value: var(--oui-green-1);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i]))::-moz-range-track {
-  --oui-border-value: var(--oui-green-6);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i]))::-ms-track {
-  --oui-border-value: var(--oui-green-6);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i]))::-webkit-slider-runnable-track {
-  --oui-border-value: var(--oui-green-6);
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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: 75%;
+  --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i]))::-moz-range-thumb {
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i]))::-ms-thumb {
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid, [aria-invalid=false i]))::-webkit-slider-thumb {
+:where(.oui-input.oui-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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-validatable:not([disabled],
+[readonly],
+[aria-disabled=true i]):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;
@@ -288,48 +347,48 @@
   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-6);
+  --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 {
-  --oui-background-value: var(--oui-blue-1);
+  --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 {
-  --oui-border-value: var(--oui-blue-6);
+  --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 {
-  --oui-border-value: var(--oui-blue-6);
+  --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 {
-  --oui-border-value: var(--oui-blue-6);
+  --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 {
-  --oui-border-value: var(--oui-blue-6);
+  --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 {
-  --oui-border-value: var(--oui-blue-6);
+  --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 {
-  --oui-border-value: var(--oui-blue-6);
+  --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
@@ -347,44 +406,44 @@
   box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
 }
 @media (hover: hover) {
-  :where(.oui-input:not([disabled], [aria-disabled=true i]):hover) {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover) {
     --oui-border-value: var(--oui-blue-4);
-    --oui-foreground-percentage: 50%;
+    --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
     --oui-outline-percentage: 90%;
     --oui-outline-value: var(--oui-blue-6);
   }
-  :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::file-selector-button {
-    --oui-background-value: var(--oui-blue-1);
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=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], [aria-disabled=true i]):hover)::-moz-range-thumb {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-thumb {
     --oui-background-value: var(--oui-blue-5);
   }
-  :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-ms-thumb {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-thumb {
     --oui-background-value: var(--oui-blue-5);
   }
-  :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-webkit-slider-thumb {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-thumb {
     --oui-background-value: var(--oui-blue-5);
   }
-  :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-moz-range-track {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-track {
     --oui-border-value: var(--oui-blue-4);
-    --oui-foreground-percentage: 50%;
+    --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
     --oui-outline-percentage: 90%;
     --oui-outline-value: var(--oui-blue-6);
   }
-  :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-ms-track {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-track {
     --oui-border-value: var(--oui-blue-4);
-    --oui-foreground-percentage: 50%;
+    --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
     --oui-outline-percentage: 90%;
     --oui-outline-value: var(--oui-blue-6);
   }
-  :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-webkit-slider-runnable-track {
+  :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-runnable-track {
     --oui-border-value: var(--oui-blue-4);
-    --oui-foreground-percentage: 50%;
+    --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
     --oui-outline-percentage: 90%;
     --oui-outline-value: var(--oui-blue-6);
@@ -394,6 +453,10 @@
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
+:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::file-selector-button {
+  --oui-background-value: var(--oui-gray-1);
+  cursor: default;
+}
 :where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]):focus) {
   --oui-outline-percentage: 75%;
 }
@@ -425,8 +488,7 @@
   --oui-background-value: var(--oui-gray-0);
 }
 :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-calendar-picker-indicator {
-  color: red;
-  stroke: red;
+  opacity: 0.5;
 }
 
 :where(select.oui-input, .oui-input[list]) {
@@ -447,7 +509,7 @@
   margin: 0 0.75em 0 0;
 }
 :where(select.oui-input:is([multiple]) > option:nth-of-type(2n)) {
-  background-color: color-mix(in oklab, var(--oui-blue-0), transparent 33%);
+  background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
 }
 :where(select.oui-input:is([multiple]) > option:checked) {
   background-color: var(--oui-blue-2);
@@ -507,10 +569,10 @@
 }
 :where(.oui-switch, .oui-toggle)::before {
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
-  box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
   outline: 4px solid 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));
 }
 :where(.oui-switch, .oui-toggle)::after {
   color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));

package/dist/css/message.css

@@ -1,17 +1,18 @@
 /*! https://github.com/oscarpalmer/oui */
+
 :where(.oui-message) {
-  --oui-shadow-value: color-mix(
-  	in oklch,
-  	var(--oui-shadow, var(--oui-gray-6)),
-  	transparent 95%
+  --oui-shadow-mixed: color-mix(
+  	in oklab,
+  	var(--oui-shadow-value, var(--oui-gray-6)),
+  	transparent 92.5%
   );
-  padding: 1em;
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
+  padding: 1em 1.25em;
+  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
+  border-radius: 0.5em;
   display: inline-flex;
   flex-flow: column nowrap;
   gap: 1em;
-  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
-  border-radius: 0.5em;
-  box-shadow: 0 0 0 1px var(--oui-shadow-value), 0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
   color: var(--oui-foreground, var(--oui-gray-8));
   line-height: 1.25;
 }
@@ -21,8 +22,8 @@
 }
 :where(.oui-message hr) {
   height: 1px;
-  margin: 0 -1em;
-  background-color: var(--oui-shadow-value, var(--oui-gray-2));
+  margin: 0 -1.25em;
+  background-color: var(--oui-border, var(--oui-gray-2));
   border: none;
 }
 :where(.oui-message p) {
@@ -32,33 +33,39 @@
 }
 :where(.oui-message-blue, .oui-message-info) {
   --oui-background: var(--oui-blue-0);
+  --oui-border: var(--oui-blue-2);
   --oui-foreground: var(--oui-blue-8);
-  --oui-shadow: var(--oui-blue-6);
+  --oui-shadow-value: var(--oui-blue-6);
 }
 :where(.oui-message-green, .oui-message-success) {
   --oui-background: var(--oui-green-0);
+  --oui-border: var(--oui-green-2);
   --oui-foreground: var(--oui-green-8);
-  --oui-shadow: var(--oui-green-6);
+  --oui-shadow-value: var(--oui-green-6);
 }
 :where(.oui-message-orange, .oui-message-warning) {
   --oui-background: var(--oui-orange-0);
+  --oui-border: var(--oui-orange-2);
   --oui-foreground: var(--oui-orange-8);
-  --oui-shadow: var(--oui-orange-6);
+  --oui-shadow-value: var(--oui-orange-6);
 }
 :where(.oui-message-purple, .oui-message-special) {
   --oui-background: var(--oui-purple-0);
+  --oui-border: var(--oui-purple-2);
   --oui-foreground: var(--oui-purple-8);
-  --oui-shadow: var(--oui-purple-6);
+  --oui-shadow-value: var(--oui-purple-6);
 }
 :where(.oui-message-red, .oui-message-error) {
   --oui-background: var(--oui-red-0);
+  --oui-border: var(--oui-red-2);
   --oui-foreground: var(--oui-red-8);
-  --oui-shadow: var(--oui-red-6);
+  --oui-shadow-value: var(--oui-red-6);
 }
 :where(.oui-message-yellow, .oui-message-notice) {
   --oui-background: var(--oui-yellow-0);
+  --oui-border: var(--oui-yellow-2);
   --oui-foreground: var(--oui-yellow-8);
-  --oui-shadow: var(--oui-yellow-6);
+  --oui-shadow-value: var(--oui-yellow-6);
 }
 
 

package/dist/css/reset.css

@@ -184,7 +184,9 @@
   -moz-appearance: none;
   appearance: none; /* Change the inconsistent appearance in all browsers [SE]*/
   padding-right: 1em; /* ditto*/
-  background: 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") no-repeat right center/1em; /* ditto*/
+  background-image: 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");
+  background-position: right center/1em; /* ditto*/
+  background-repeat: no-repeat; /* ditto*/
   border-radius: 0; /* ditto*/
 }
 

package/dist/css/table.css

@@ -1,6 +1,7 @@
 /*! https://github.com/oscarpalmer/oui */
 :where(.oui-table) {
   width: 100%;
+  background-color: var(--oui-absolute);
 }
 :where(.oui-table-wrapper) {
   max-height: 32em;
@@ -24,35 +25,51 @@
   z-index: 2;
 }
 :where(.oui-table tbody tr:nth-of-type(2n)) {
-  background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
+  background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
 }
 :where(.oui-table th, .oui-table tfoot td) {
   background-color: var(--oui-gray-1);
   border: solid var(--oui-gray-3);
   border-width: 0 1px 0 0;
+}
+:where(.oui-table thead th, .oui-table tfoot td) {
   position: sticky;
   left: 0;
   z-index: 1;
 }
-:where(.oui-table th, .oui-table tfoot td)::after {
+:where(.oui-table thead th, .oui-table tfoot td)::after {
   content: "";
-  border-bottom: 1px solid var(--oui-gray-3);
+  width: 100%;
+  height: 4px;
+  background-image: linear-gradient(to var(--oui-shadow-direction), rgba(0, 0, 0, 0.1), transparent);
   position: absolute;
 }
 :where(.oui-table th, .oui-table td) {
-  padding: 0.5em;
+  padding: 0.5em 0.625rem;
 }
-:where(.oui-table th) {
-  top: 2em;
+:where(.oui-table thead th) {
+  font-size: 0.75rem;
+  font-weight: bold;
+  letter-spacing: 0.1em;
+  text-align: left;
+  text-transform: uppercase;
+  top: 0;
+}
+:where(.oui-table thead th)::after {
+  --oui-shadow-direction: bottom;
+  border-top: 1px solid var(--oui-gray-3);
+  inset: 100% 0 0 0;
 }
-:where(.oui-table th)::after {
-  inset: auto 0 0 0;
+:where(.oui-table:has(caption) thead th) {
+  top: 2rem;
 }
 :where(.oui-table tfoot td) {
   bottom: 0;
 }
 :where(.oui-table tfoot td)::after {
-  inset: 0 0 auto 0;
+  --oui-shadow-direction: top;
+  border-bottom: 1px solid var(--oui-gray-3);
+  inset: -4px 0 0 0;
 }
 :where(.oui-table tbody td) {
   border: solid var(--oui-gray-3);

package/package.json

@@ -9,7 +9,7 @@
 	},
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"devDependencies": {
-		"@biomejs/biome": "^1.9",
+		"@biomejs/biome": "^2",
 		"@rollup/plugin-node-resolve": "^16",
 		"@rollup/plugin-typescript": "^12.1",
 		"@types/node": "^24",
@@ -22,7 +22,7 @@
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
 		"sass": "^1.89",
-		"stylelint": "^16.20",
+		"stylelint": "^16.21",
 		"tslib": "^2.8",
 		"typescript": "^5.8",
 		"vite": "^6.3",
@@ -78,11 +78,11 @@
 		"rollup": "npx rollup -c --watch",
 		"test": "npx vitest --coverage",
 		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
-		"watch:css": "npx sass ./src/css:./dist/css --no-source-map --watch",
+		"watch:css": "npx sass ./postcss:./dist/css --no-source-map --watch",
 		"watch:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
 		"watch:js": "npx vite build --watch"
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.11.0"
+	"version": "0.12.0"
 }

package/src/css/badge.scss

@@ -1,21 +1,21 @@
 /*! https://github.com/oscarpalmer/oui */
 
+@use './mixins.scss' as mixins;
+
 .oui {
 	:where(&-pill, &-tag) {
-		--oui-shadow-value: color-mix(
-			in oklch,
+		--oui-shadow-mixed: color-mix(
+			in oklab,
 			var(--oui-shadow, var(--oui-gray-6)),
-			transparent 95%
+			transparent 92.5%
 		);
 
+		@include mixins.shadow(var(--oui-shadow-mixed));
+
 		display: inline-flex;
 		flex-flow: row nowrap;
 		gap: .5em;
 		background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
-		box-shadow:
-			0 0 0 1px var(--oui-shadow-value),
-			0 1px 2px 0 var(--oui-shadow-value),
-			0 2px 4px 0 var(--oui-shadow-value);
 		color: var(--oui-foreground, var(--oui-gray-8));
 		line-height: 1.25;
 	}

package/src/css/button.scss

@@ -1,3 +1,5 @@
+/*! https://github.com/oscarpalmer/oui */
+
 @use './mixins' as mixins;
 
 .oui-button {
@@ -75,9 +77,9 @@
 
 	:where(&:not([disabled], [aria-disabled='true' i]):active) {
 		box-shadow:
-			0 0 0 1px var(--oui-shadow-mixed),
-			inset 0 1px 2px 0 var(--oui-shadow-mixed),
-			inset 0 2px 4px 0 var(--oui-shadow-mixed);
+			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);
 	}
 
 	:where(&[disabled], &[aria-disabled='true' i]) {