@oscarpalmer/oui 0.11.0 → 0.13.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/dist/css/tooltip.css

@@ -0,0 +1,14 @@
+
+:where([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);
+  max-width: 48ch;
+  padding: 0.75em 1em;
+  background-color: var(--oui-absolute);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  position: fixed;
+  inset: 0 auto auto 0;
+  z-index: 10;
+}
+
+

package/dist/js/attributable.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function attributable(attribute, add, remove) {
+  const observer = new MutationObserver((entries) => {
+    const { length } = entries;
+    for (let index = 0; index < length; index += 1) {
+      const entry = entries[index];
+      if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
+        if (entry.target.hasAttribute(attribute)) {
+          handleAdded(attribute, [entry.target], add);
+        } else {
+          handleRemoved([entry.target], remove);
+        }
+      } else if (entry.type === "childList") {
+        handleAdded(attribute, entry.addedNodes, add);
+        handleRemoved(entry.removedNodes, remove);
+      }
+    }
+  });
+  observer.observe(document, {
+    attributeFilter: [attribute],
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+  requestAnimationFrame(() => {
+    handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+  });
+}
+function handleAdded(attribute, nodes, add) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    if (element.hasAttribute(attribute)) {
+      add(element);
+    }
+  }
+}
+function handleRemoved(nodes, remove) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    remove(elements[index]);
+  }
+}
+exports.attributable = attributable;