@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/css/a11y.css

@@ -1,5 +1,6 @@
 /*! https://github.com/oscarpalmer/oui */
 
+
 :where(.oui-vh) {
   position: absolute !important;
 }

package/dist/css/badge.css

@@ -1,13 +1,17 @@
 /*! https://github.com/oscarpalmer/oui */
 
+
 :where(.oui-pill, .oui-tag) {
-  --oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
-  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);
+  --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 50%);
+  --oui-shadow-value: var(--oui-gray-6);
+  --oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow-value), transparent 87.5%);
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 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);
   display: inline-flex;
   flex-flow: row nowrap;
   gap: 0.5em;
-  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
+  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-1)), transparent 25%);
   color: var(--oui-foreground, var(--oui-gray-8));
+  text-shadow: 0 1px 0 var(--oui-absolute);
   line-height: 1.25;
 }
 :where(.oui-pill) {
@@ -35,34 +39,34 @@
   /* Colors*/
 }
 :where(.oui-pill--blue, .oui-tag--blue) {
-  --oui-background: var(--oui-blue-0);
+  --oui-background: var(--oui-blue-1);
   --oui-foreground: var(--oui-blue-8);
-  --oui-shadow: var(--oui-blue-6);
+  --oui-shadow-value: var(--oui-blue-6);
 }
 :where(.oui-pill--green, .oui-tag--green) {
-  --oui-background: var(--oui-green-0);
+  --oui-background: var(--oui-green-1);
   --oui-foreground: var(--oui-green-8);
-  --oui-shadow: var(--oui-green-6);
+  --oui-shadow-value: var(--oui-green-6);
 }
 :where(.oui-pill--orange, .oui-tag--orange) {
-  --oui-background: var(--oui-orange-0);
+  --oui-background: var(--oui-orange-1);
   --oui-foreground: var(--oui-orange-8);
-  --oui-shadow: var(--oui-orange-6);
+  --oui-shadow-value: var(--oui-orange-6);
 }
 :where(.oui-pill--purple, .oui-tag--purple) {
-  --oui-background: var(--oui-purple-0);
+  --oui-background: var(--oui-purple-1);
   --oui-foreground: var(--oui-purple-8);
-  --oui-shadow: var(--oui-purple-6);
+  --oui-shadow-value: var(--oui-purple-6);
 }
 :where(.oui-pill--red, .oui-tag--red) {
-  --oui-background: var(--oui-red-0);
+  --oui-background: var(--oui-red-1);
   --oui-foreground: var(--oui-red-8);
-  --oui-shadow: var(--oui-red-6);
+  --oui-shadow-value: var(--oui-red-6);
 }
 :where(.oui-pill--yellow, .oui-tag--yellow) {
-  --oui-background: var(--oui-yellow-0);
+  --oui-background: var(--oui-yellow-1);
   --oui-foreground: var(--oui-yellow-8);
-  --oui-shadow: var(--oui-yellow-6);
+  --oui-shadow-value: var(--oui-yellow-6);
 }
 
 

package/dist/css/button.css

@@ -1,57 +1,85 @@
 /*! https://github.com/oscarpalmer/oui */
 
+
 :where(.oui-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-button):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where(.oui-button):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where(.oui-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-button):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where(.oui-button):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
+}
+:where(.oui-button)[disabled], :where(.oui-button)[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
 }
 :where(.oui-button--blue) {
-  --oui-background-value: var(--oui-blue-2);
+  --oui-background-value: var(--oui-blue-3);
   --oui-foreground-value: var(--oui-blue-8);
   --oui-outline-value: var(--oui-blue-6);
 }
 :where(.oui-button--green) {
-  --oui-background-value: var(--oui-green-2);
+  --oui-background-value: var(--oui-green-3);
   --oui-foreground-value: var(--oui-green-8);
   --oui-outline-value: var(--oui-green-6);
 }
 :where(.oui-button--orange) {
-  --oui-background-value: var(--oui-orange-2);
+  --oui-background-value: var(--oui-orange-3);
   --oui-foreground-value: var(--oui-orange-8);
   --oui-outline-value: var(--oui-orange-6);
 }
 :where(.oui-button--purple) {
-  --oui-background-value: var(--oui-purple-2);
+  --oui-background-value: var(--oui-purple-3);
   --oui-foreground-value: var(--oui-purple-8);
   --oui-outline-value: var(--oui-purple-6);
 }
 :where(.oui-button--red) {
-  --oui-background-value: var(--oui-red-2);
+  --oui-background-value: var(--oui-red-3);
   --oui-foreground-value: var(--oui-red-8);
   --oui-outline-value: var(--oui-red-6);
 }
 :where(.oui-button--yellow) {
-  --oui-background-value: var(--oui-yellow-2);
+  --oui-background-value: var(--oui-yellow-3);
   --oui-foreground-value: var(--oui-yellow-8);
   --oui-outline-value: var(--oui-yellow-6);
 }
@@ -68,24 +96,5 @@
   --oui-foreground-percentage: 12.5%;
   font-size: 0.75em;
 }
-:where(.oui-button:focus-visible) {
-  --oui-outline-percentage: 75%;
-}
-@media (hover: hover) {
-  :where(.oui-button:not([disabled], [aria-disabled=true i]):hover) {
-    --oui-background-percentage: 50%;
-    --oui-foreground-percentage: 25%;
-    --oui-shadow-percentage: 90%;
-  }
-}
-:where(.oui-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);
-}
-:where(.oui-button[disabled], .oui-button[aria-disabled=true i]) {
-  --oui-background-percentage: 80%;
-  --oui-foreground-percentage: 20%;
-  --oui-shadow-percentage: 95%;
-  font-style: italic;
-}
 
 

package/dist/css/color-picker.css

@@ -0,0 +1,377 @@
+@charset "UTF-8";
+/*! https://github.com/oscarpalmer/oui */
+
+
+
+
+:where(oui-color-picker) {
+  outline: none;
+}
+
+:where(oui-color-picker[inline] [oui-color-picker-content],
+[oui-color-picker-content]:popover-open) {
+  display: flex !important;
+  flex-flow: column nowrap;
+}
+
+:where(oui-color-picker[inline] [oui-color-picker-content],
+[oui-color-picker-hue],
+[oui-color-picker-opacity]) {
+  margin: 1em 0 0;
+}
+
+:where([oui-color-picker-anchor]) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+}
+:where([oui-color-picker-anchor] *) {
+  position: relative;
+}
+:where([oui-color-picker-anchor] *:focus) {
+  z-index: 1;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-anchor] *:hover) {
+    z-index: 1;
+  }
+}
+
+:where([oui-color-picker-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-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),
+  	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), 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), 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), transparent var(--oui-foreground-percentage));
+  line-height: 1.25;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-color-picker-button]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-button]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where([oui-color-picker-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-color-picker-button]):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where([oui-color-picker-button]):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
+}
+:where([oui-color-picker-button])[disabled], :where([oui-color-picker-button])[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-color-picker-button]) {
+  box-shadow: inset 0 1px 0 0 transparent, 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);
+  --oui-background-value: var(--oui-color-picker-hex);
+  --oui-outline-value: var(--oui-gray-6);
+  width: 2.5em;
+  margin: 1px 0;
+  border: 2px solid var(--oui-absolute);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  position: relative;
+}
+:where([oui-color-picker-button])::after {
+  display: none;
+  color: var(--oui-color-picker-foreground);
+  font-size: 8px;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+:where([oui-color-picker-button])[aria-expanded=false i]::after {
+  content: "▶";
+  display: inline-flex;
+}
+:where([oui-color-picker-button])[aria-expanded=true i]::after {
+  content: "▼";
+  display: inline-flex;
+}
+:where([oui-color-picker-button]:active) {
+  scale: 1;
+}
+
+:where([oui-color-picker-content][popover]) {
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
+}
+:where([oui-color-picker-content][popover])[oui-position$=bottom i] {
+  --margin-bottom: 0;
+}
+:where([oui-color-picker-content][popover])[oui-position$=end i] {
+  --margin-right: 0;
+}
+:where([oui-color-picker-content][popover])[oui-position$=start i] {
+  --margin-left: 0;
+}
+:where([oui-color-picker-content][popover])[oui-position$=top i] {
+  --margin-top: 0;
+}
+:where([oui-color-picker-content][popover]) {
+  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);
+  min-width: anchor-size(width);
+  border-radius: 0.25em;
+}
+:where([oui-color-picker-content][popover]:not(:has(> [oui-color-picker-opacity]))) {
+  border-radius: 0.25em 0.25em 0.75em 0.75em;
+}
+[oui-color-picker-content][popover] :where([oui-color-picker-content],
+[oui-color-picker-hue],
+[oui-color-picker-opacity],
+[oui-color-picker-well]) {
+  margin: 1em 1em 0;
+}
+:where([oui-color-picker-content][popover] > :last-child) {
+  margin-bottom: 1em !important;
+}
+
+:where([oui-color-picker-hue], [oui-color-picker-opacity]) {
+  position: relative;
+}
+
+:where([oui-color-picker-hue-input], [oui-color-picker-opacity-input]) {
+  opacity: 0;
+  position: absolute;
+  inset: -0.25em -0.75em;
+  z-index: 1;
+}
+
+:where([oui-color-picker-hue-label], [oui-color-picker-opacity-label]) {
+  display: none;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-knob]),
+:where([oui-color-picker-opacity-track]),
+:where([oui-color-picker-well-knob]) {
+  --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));
+  transition: outline 0.125s ease-in-out;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-opacity-knob]),
+:where([oui-color-picker-well-knob]) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.0625), 0 1px 2px -0.5px rgba(0, 0, 0, 0.0625), 0 2px 4px -1px rgba(0, 0, 0, 0.0625), 0 4px 8px -2px rgba(0, 0, 0, 0.0625), 0 8px 16px -4px rgba(0, 0, 0, 0.0625), 0 16px 32px -8px rgba(0, 0, 0, 0.0625), 0 32px 64px -16px rgba(0, 0, 0, 0.0625), 0 64px 128px -32px rgba(0, 0, 0, 0.0625);
+  width: 1.5em;
+  height: 1.5em;
+  border: 0.3333em solid var(--oui-absolute);
+  border-radius: 1.5em;
+  position: absolute;
+  z-index: 1;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-well-knob]) {
+  background-color: var(--oui-color-picker-hex);
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-opacity-knob]) {
+  transform: translate3d(-50%, -0.25em, 0);
+}
+
+:where([oui-color-picker-hue-knob]) {
+  inset: 0 0 0 calc(var(--oui-color-picker-hue) / 360 * 100%);
+  pointer-events: none;
+}
+
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-track]),
+:where([oui-color-picker-well]) {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 0 2px 4px -1px rgba(0, 0, 0, 0.05), inset 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+}
+
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-track]) {
+  height: 1em;
+  border: 1px solid transparent;
+  border-radius: 1em;
+  pointer-events: none;
+}
+
+:where([oui-color-picker-hue-track]) {
+  background-image: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 16.6667%, hsl(120, 100%, 50%) 33.3333%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 66.6667%, hsl(300, 100%, 50%) 83.3333%, hsl(0, 100%, 50%) 100%);
+}
+
+:where([oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track], [oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track] [oui-color-picker-hue-knob], [oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track] [oui-color-picker-opacity-knob],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track] [oui-color-picker-hue-knob],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track] [oui-color-picker-opacity-knob]) {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track]) {
+  border-color: var(--oui-absolute);
+}
+
+:where([oui-color-picker-input]) {
+  --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;
+  --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-color-picker-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]) {
+  --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-color-picker-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]) {
+  --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-color-picker-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-input]):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-color-picker-input]):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-color-picker-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where([oui-color-picker-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-color-picker-input]):is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where([oui-color-picker-input]) {
+  --oui-background-value: var(--oui-absolute);
+  padding: 0.5em 0.75em;
+  border-radius: 0.25em;
+  font-family: monospace, monospace;
+}
+:where([oui-color-picker-input]:has(+ button)) {
+  border-radius: 0.25em 0 0 0.25em;
+}
+:where([oui-color-picker-input]:is([disabled], [aria-disabled=true i])) {
+  --oui-background-percentage: 50%;
+}
+
+:where([oui-color-picker-opacity-knob]) {
+  background-color: var(--oui-absolute);
+  background-image: linear-gradient(to right, color-mix(in oklab, var(--oui-color-picker-hex), transparent calc((100 - var(--oui-color-picker-alpha)) * 1%)) 0%, color-mix(in oklab, var(--oui-color-picker-hex), transparent calc((100 - var(--oui-color-picker-alpha)) * 1%)) 100%);
+  inset: 0 0 0 calc(var(--oui-color-picker-alpha) * 1%);
+}
+
+:where([oui-color-picker-opacity-track]) {
+  background-color: var(--oui-absolute);
+  background-image: linear-gradient(to right, transparent 0%, hsl(var(--oui-color-picker-hue), 100%, 50%) 100%);
+  position: relative;
+}
+:where([oui-color-picker-opacity-track])::after {
+  content: "";
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%), linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%), linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%);
+  background-size: 0.5em 0.5em;
+  background-position: 0 0, 0.25em 0, 0.25em -0.25em, 0 0.25em;
+  border-radius: 1em;
+  position: absolute;
+  inset: 0;
+}
+
+:where([oui-color-picker-well]) {
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  padding: 100% 0 0;
+  background-color: hsl(var(--oui-color-picker-hue), 100%, 50%);
+  background-image: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 4px;
+  border-radius: 0.125em;
+  position: relative;
+  transition: outline 0.125s ease-in-out;
+}
+:where([oui-color-picker-well]:has(:focus-visible)) {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-well]:hover) {
+    --oui-outline-percentage: 75%;
+  }
+}
+
+:where([oui-color-picker-well-knob]) {
+  --oui-outline-value: var(--oui-absolute);
+  outline-offset: 2px;
+  inset: calc((100 - var(--oui-color-picker-lightness)) * 1%) 0 0 calc(var(--oui-color-picker-saturation) * 1%);
+  transform: translate3d(-50%, -50%, 0);
+  cursor: move;
+}
+:where([oui-color-picker-well-knob]:focus-visible) {
+  --oui-outline-percentage: 33.3333%;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-well-knob]:hover) {
+    --oui-outline-percentage: 33.3333%;
+  }
+}
+
+

package/dist/css/color.css

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