@oscarpalmer/oui 0.39.0 → 0.41.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://badge.fury.io/js/@oscarpalmer%2Foui.svg)](https://www.npmjs.com/package/@oscarpalmer/oui)
 
-_Oui_ _(Oscar UI)_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
+_Oui_ _(Oscar UI)_ is a collection of styles, components, and related whatchamacallits for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
 
 ## License
 

package/dist/css/color-picker.css

@@ -272,11 +272,11 @@
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
 }
 
-:where([oui-color-picker-hue], [oui-color-picker-opacity]) {
+:where([oui-color-picker-hue], [oui-color-picker-opacity-slider]) {
   position: relative;
 }
 
-:where([oui-color-picker-hue-input], [oui-color-picker-opacity-input]) {
+:where([oui-color-picker-hue-input], [oui-color-picker-opacity-range]) {
   opacity: 0;
   position: absolute;
   inset: -0.25em -0.75em;
@@ -354,13 +354,13 @@
 }
 
 :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-color-picker-opacity-range]:focus-visible + [oui-color-picker-opacity-track],
+[oui-color-picker-opacity-range]:focus-visible + [oui-color-picker-opacity-track] [oui-color-picker-hue-knob],
+[oui-color-picker-opacity-range]: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]) {
+[oui-color-picker-opacity-range]:focus-visible + [oui-color-picker-opacity-track]) {
   border-color: var(--oui-absolute);
 }
 
@@ -441,48 +441,7 @@
   --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-output]) {
-  padding: 1em 0 0;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 1em;
-  border-top: 1px solid var(--oui-gray-3);
-}
-:where([oui-color-picker-content][popover] [oui-color-picker-output]) {
-  padding: 1em 1em 0;
-  margin: 0 -1em;
-}
-
-:where([oui-color-picker-output-format]) {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  justify-content: flex-end;
-  gap: 0.5em;
-}
-
-:where([oui-color-picker-output-format-value]) {
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-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));
@@ -498,7 +457,7 @@
   transition: 0.125s ease-in-out;
   transition-property: background, outline, border, box-shadow, color;
 }
-:where([oui-color-picker-output-format-value]).oui-validate:not([disabled],
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-input]).oui-validate:not([disabled],
 [readonly],
 [aria-disabled=true i],
 [aria-readonly=true i],
@@ -509,7 +468,7 @@
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where([oui-color-picker-output-format-value]).oui-validate:not([disabled],
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-input]).oui-validate:not([disabled],
 [readonly],
 [aria-disabled=true i],
 [aria-readonly=true i],
@@ -520,14 +479,14 @@
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where([oui-color-picker-output-format-value]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-output-format-value]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-opacity-input], [oui-color-picker-output-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-output-format-value]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+  :where([oui-color-picker-opacity-input], [oui-color-picker-output-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;
@@ -535,24 +494,76 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where([oui-color-picker-output-format-value]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where([oui-color-picker-output-format-value]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
   --oui-outline-percentage: 75%;
 }
-:where([oui-color-picker-output-format-value]):is([disabled], [aria-disabled=true i]) {
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-input]):is([disabled], [aria-disabled=true i]) {
   --oui-background-percentage: 50%;
 }
-:where([oui-color-picker-output-format-value]) {
-  padding-right: 2em;
+:where([oui-color-picker-opacity-input], [oui-color-picker-output-input]) {
+  width: 4em;
   background-color: var(--oui-absolute);
-  background-position: right 0.5em center;
   border-radius: 0.25em;
+  font-family: monospace, monospace;
 }
 
-:where([oui-color-picker-output-input]) {
+:where([oui-color-picker-opacity]) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 1em;
+}
+
+:where([oui-color-picker-opacity-slider]) {
+  flex: 1;
+}
+
+: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-output]) {
+  padding: 1em 0 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1em;
+  border-top: 1px solid var(--oui-gray-3);
+}
+:where([oui-color-picker-content][popover] [oui-color-picker-output]) {
+  padding: 1em 1em 0;
+  margin: 0 -1em;
+}
+
+:where([oui-color-picker-output-format]) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: 0.5em;
+}
+
+:where([oui-color-picker-output-format-value]) {
   --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));
@@ -568,7 +579,7 @@
   transition: 0.125s ease-in-out;
   transition-property: background, outline, border, box-shadow, color;
 }
-:where([oui-color-picker-output-input]).oui-validate:not([disabled],
+:where([oui-color-picker-output-format-value]).oui-validate:not([disabled],
 [readonly],
 [aria-disabled=true i],
 [aria-readonly=true i],
@@ -579,7 +590,7 @@
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where([oui-color-picker-output-input]).oui-validate:not([disabled],
+:where([oui-color-picker-output-format-value]).oui-validate:not([disabled],
 [readonly],
 [aria-disabled=true i],
 [aria-readonly=true i],
@@ -590,14 +601,14 @@
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where([oui-color-picker-output-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-output-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+:where([oui-color-picker-output-format-value]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-output-format-value]):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-output-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+  :where([oui-color-picker-output-format-value]):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;
@@ -605,21 +616,21 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where([oui-color-picker-output-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+:where([oui-color-picker-output-format-value]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where([oui-color-picker-output-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+:where([oui-color-picker-output-format-value]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
   --oui-outline-percentage: 75%;
 }
-:where([oui-color-picker-output-input]):is([disabled], [aria-disabled=true i]) {
+:where([oui-color-picker-output-format-value]):is([disabled], [aria-disabled=true i]) {
   --oui-background-percentage: 50%;
 }
-:where([oui-color-picker-output-input]) {
-  width: 4em;
+:where([oui-color-picker-output-format-value]) {
+  padding-right: 2em;
   background-color: var(--oui-absolute);
+  background-position: right 0.5em center;
   border-radius: 0.25em;
-  font-family: monospace, monospace;
 }
 
 :where([oui-color-picker-output-item]) {

package/dist/css/listbox.css

@@ -3,6 +3,7 @@
 
 
 
+
 :where(oui-listbox, [oui-listbox-content]) {
   display: flex;
   flex-flow: column nowrap;
@@ -104,6 +105,174 @@
   position: relative;
 }
 
+:where([oui-listbox-footer]) {
+  padding: 1em;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 1em;
+  background-color: var(--oui-absolute);
+  border-radius: 0 0 0.5em 0.5em;
+  position: relative;
+  z-index: 2;
+}
+:where([oui-listbox-footer])::after {
+  content: "";
+  width: 100%;
+  height: 0.25em;
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.125), transparent);
+  position: absolute;
+  top: -0.25em;
+  left: 0;
+}
+
+:where([oui-listbox-footer-button]) {
+  --oui-background-percentage: 50%;
+  --oui-background-value: var(--oui-gray-2);
+  --oui-foreground-percentage: 0%;
+  --oui-foreground-value: var(--oui-gray-8);
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-gray-5);
+  --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;
+  position: relative;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-listbox-footer-button])::after {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  opacity: 0;
+  background-color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  -webkit-mask-image: url("");
+  mask-image: url("");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1em 1em;
+  mask-size: 1em 1em;
+  pointer-events: none;
+  transition: 0.125s ease-in-out;
+  transition-property: background-color, color, opacity, -webkit-mask-image;
+  transition-property: background-color, color, mask-image, opacity;
+  transition-property: background-color, color, mask-image, opacity, -webkit-mask-image;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+:where([oui-listbox-footer-button]):has(.oui-icon:is(:first-child))::after {
+  inset: auto;
+  transform: none;
+}
+:where([oui-listbox-footer-button]):has(.oui-icon:is(:last-child))::after {
+  inset: auto 0.75em auto auto;
+  transform: none;
+}
+:where([oui-listbox-footer-button]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=busy i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=error i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=loading i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=success i]:not(:has(.oui-icon:is(:first-child, :last-child))) {
+  color: transparent;
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=error i]::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  opacity: 1;
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[aria-busy=true i] .oui-icon, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=busy i] .oui-icon, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=error i] .oui-icon, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=loading i] .oui-icon, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=success i] .oui-icon {
+  opacity: 0;
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[aria-busy=true i], :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=busy i], :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=loading i] {
+  --oui-background-value: var(--oui-blue-2);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-5);
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  transform-origin: center;
+  animation: oui-button-icon-centered 1s linear infinite;
+}
+@keyframes oui-button-icon-centered {
+  to {
+    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=busy i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=loading i]:has(.oui-icon:is(:first-child, :last-child))::after {
+  animation: oui-button-icon-offset 1s linear infinite;
+}
+@keyframes oui-button-icon-offset {
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=error i] {
+  --oui-background-value: var(--oui-red-2);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-value: var(--oui-red-5);
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=error i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=success i] {
+  --oui-background-value: var(--oui-green-2);
+  --oui-foreground-value: var(--oui-green-8);
+  --oui-outline-value: var(--oui-green-5);
+}
+:where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+}
+:where([oui-listbox-footer-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-listbox-footer-button]):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where([oui-listbox-footer-button]):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
+}
+:where([oui-listbox-footer-button])[disabled], :where([oui-listbox-footer-button])[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-listbox-footer-button]) .oui-icon {
+  width: 1em;
+  height: 1em;
+}
+:where([oui-listbox-footer-button]) .oui-icon:is(:first-child, :last-child) {
+  transition: opacity 0.125s ease-in-out;
+}
+:where([oui-listbox-footer-button]) {
+  font-size: 0.875em;
+}
+
 :where([oui-listbox-header]) {
   padding: 0.5em 1em;
   background-color: var(--oui-gray-0);

package/dist/js/color-picker/color-picker.constants.d.mts

@@ -0,0 +1,2 @@
+import { S as colorPickerLocalizations, _ as COLOR_PICKER_SELECTOR_OUTPUT_INPUT, a as COLOR_PICKER_ATTRIBUTE_OPACITY, b as COLOR_PICKER_SYMBOL, c as COLOR_PICKER_ATTRIBUTE_WELL_KNOB, d as COLOR_PICKER_KEYS, f as COLOR_PICKER_MESSAGE_INPUT, g as COLOR_PICKER_SELECTOR_INPUT, h as COLOR_PICKER_SELECTOR_COPY, i as COLOR_PICKER_ATTRIBUTE_INPUT, l as COLOR_PICKER_EXPRESSION_HEX_PREFIX, m as COLOR_PICKER_OUTPUTS, n as COLOR_PICKER_ATTRIBUTE_COPY_ERROR, o as COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, p as COLOR_PICKER_MESSAGE_LABEL, r as COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, s as COLOR_PICKER_ATTRIBUTE_WELL, t as COLOR_PICKER_ATTRIBUTE_COPY, u as COLOR_PICKER_INPUT_TYPES, v as COLOR_PICKER_SELECTOR_WELL, x as COLOR_PICKER_TAGNAME, y as COLOR_PICKER_SELECTOR_WELL_KNOB } from "../color-picker.constants-BZgXQr5o.mjs";
+export { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_ATTRIBUTE_INPUT, COLOR_PICKER_ATTRIBUTE_OPACITY, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME, colorPickerLocalizations };

package/dist/js/color-picker/{constants.color-picker.mjs → color-picker.constants.mjs}

@@ -1,11 +1,12 @@
-import { getLocalizations } from "../l10n.mjs";
+import { createDefaultLocalizations } from "../internal/l10n/index.mjs";
 import { round } from "@oscarpalmer/atoms/math";
-//#region src/js/color-picker/constants.color-picker.ts
+//#region src/js/color-picker/color-picker.constants.ts
 const COLOR_PICKER_TAGNAME = "oui-color-picker";
 const COLOR_PICKER_ATTRIBUTE_COPY = `${COLOR_PICKER_TAGNAME}-copy`;
 const COLOR_PICKER_ATTRIBUTE_COPY_ERROR = `${COLOR_PICKER_ATTRIBUTE_COPY}-error`;
 const COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS = `${COLOR_PICKER_ATTRIBUTE_COPY}-success`;
 const COLOR_PICKER_ATTRIBUTE_INPUT = `${COLOR_PICKER_TAGNAME}-input`;
+const COLOR_PICKER_ATTRIBUTE_OPACITY = `${COLOR_PICKER_TAGNAME}-opacity`;
 const COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT = `${COLOR_PICKER_TAGNAME}-output-input`;
 const COLOR_PICKER_ATTRIBUTE_WELL = `${COLOR_PICKER_TAGNAME}-well`;
 const COLOR_PICKER_ATTRIBUTE_WELL_KNOB = `${COLOR_PICKER_TAGNAME}-well-knob`;
@@ -27,6 +28,7 @@ const COLOR_PICKER_OUTPUTS = /* @__PURE__ */ new Set([
 	"all",
 	"none",
 	"hsl",
+	"hwb",
 	"rgb"
 ]);
 const COLOR_PICKER_SELECTOR_COPY = `[${COLOR_PICKER_ATTRIBUTE_COPY}]`;
@@ -34,7 +36,8 @@ const COLOR_PICKER_SELECTOR_INPUT = `[${COLOR_PICKER_ATTRIBUTE_INPUT}]`;
 const COLOR_PICKER_SELECTOR_OUTPUT_INPUT = `[${COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT}]`;
 const COLOR_PICKER_SELECTOR_WELL = `[${COLOR_PICKER_ATTRIBUTE_WELL}]`;
 const COLOR_PICKER_SELECTOR_WELL_KNOB = `[${COLOR_PICKER_ATTRIBUTE_WELL_KNOB}]`;
-const colorPickerLocalizations = getLocalizations({
+const COLOR_PICKER_SYMBOL = Symbol(COLOR_PICKER_TAGNAME);
+const colorPickerLocalizations = createDefaultLocalizations({
 	blackness: "Blackness",
 	blue: "Blue",
 	copy: "Copy",
@@ -56,4 +59,4 @@ const colorPickerLocalizations = getLocalizations({
 	whiteness: "Whiteness"
 });
 //#endregion
-export { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_ATTRIBUTE_INPUT, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations };
+export { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_ATTRIBUTE_INPUT, COLOR_PICKER_ATTRIBUTE_OPACITY, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME, colorPickerLocalizations };

package/dist/js/color-picker/{dom.color-picker.d.mts → color-picker.dom.d.mts}

@@ -1,5 +1,5 @@
-import { C as OuiColorPickerContent, D as OuiColorPickerContentWell, T as OuiColorPickerContentOpacity, k as OuiColorPickerCreateParameters, w as OuiColorPickerContentHue, x as OuiColorPickerAnchor } from "../constants.color-picker-B-gFjL8m.mjs";
-//#region src/js/color-picker/dom.color-picker.d.ts
+import { A as OuiColorPickerContentWell, D as OuiColorPickerContentHue, E as OuiColorPickerContent, M as OuiColorPickerCreateParameters, O as OuiColorPickerContentOpacity, w as OuiColorPickerAnchor } from "../color-picker.constants-BZgXQr5o.mjs";
+//#region src/js/color-picker/color-picker.dom.d.ts
 export declare function createColorPickerAnchor(parameters: OuiColorPickerCreateParameters): OuiColorPickerAnchor;
 export declare function createColorPickerContent(parameters: OuiColorPickerCreateParameters): OuiColorPickerContent;
 export declare function createColorPickerHue(parameters: OuiColorPickerCreateParameters): OuiColorPickerContentHue;

package/dist/js/color-picker/{dom.color-picker.mjs → color-picker.dom.mjs}

@@ -1,7 +1,7 @@
-import { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.mjs";
-import { createColorPickerOutput } from "./output.color-picker.mjs";
+import { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_OPACITY, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker.constants.mjs";
+import { createColorPickerOutput } from "./color-picker.output.mjs";
 import { createElement } from "@oscarpalmer/toretto/create";
-//#region src/js/color-picker/dom.color-picker.ts
+//#region src/js/color-picker/color-picker.dom.ts
 function createColorPickerAnchor(parameters) {
 	const { alpha, color, id, inline } = parameters;
 	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-anchor`]: "" } });
@@ -73,10 +73,10 @@ function createColorPickerCopy(parameters, color) {
 	if (!parameters.copy) return;
 	return { button: createElement("button", {
 		attribute: { [COLOR_PICKER_ATTRIBUTE_COPY]: "" },
-		aria: { label: colorPickerLocalizations.defaults.copy },
+		aria: { label: colorPickerLocalizations.values.defaults.copy },
 		data: { color },
 		property: {
-			textContent: colorPickerLocalizations.defaults.copy,
+			textContent: colorPickerLocalizations.values.defaults.copy,
 			type: "button"
 		}
 	}) };
@@ -127,42 +127,59 @@ function createColorPickerHue(parameters) {
 function createColorPickerOpacity(parameters) {
 	const { alpha, color, id } = parameters;
 	if (!alpha) return;
-	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-opacity`]: "" } });
+	const container = createElement("div", { attribute: { [COLOR_PICKER_ATTRIBUTE_OPACITY]: "" } });
 	const label = createElement("label", {
-		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-label`]: "" },
+		attribute: { [`${COLOR_PICKER_ATTRIBUTE_OPACITY}-label`]: "" },
 		property: {
-			htmlFor: `${id}_opacity`,
+			htmlFor: `${id}_opacity_range`,
 			id: `${id}_opacity_label`
 		}
 	});
-	const input = createElement("input", {
-		aria: { labelledby: `${id}_label ${label.id}` },
+	const slider = createElement("div", { attribute: { [`${COLOR_PICKER_ATTRIBUTE_OPACITY}-slider`]: "" } });
+	const range = createElement("input", {
+		aria: { labelledby: label.id },
 		attribute: {
-			[`${COLOR_PICKER_TAGNAME}-opacity-input`]: "",
+			[`${COLOR_PICKER_ATTRIBUTE_OPACITY}-range`]: "",
 			form: "",
 			max: 100,
 			min: 0
 		},
 		property: {
-			id: `${id}_opacity`,
+			id: `${id}_opacity_range`,
 			type: "range",
 			value: color.alpha.toString()
 		}
 	});
 	const knob = createElement("span", {
 		aria: { hidden: true },
-		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-knob`]: "" }
+		attribute: { [`${COLOR_PICKER_ATTRIBUTE_OPACITY}-knob`]: "" }
 	});
 	const track = createElement("div", {
 		aria: { hidden: true },
-		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-track`]: "" }
+		attribute: { [`${COLOR_PICKER_ATTRIBUTE_OPACITY}-track`]: "" }
+	});
+	const input = createElement("input", {
+		aria: { labelledby: label.id },
+		attribute: {
+			[`${COLOR_PICKER_ATTRIBUTE_OPACITY}-input`]: "",
+			form: "",
+			max: 100,
+			min: 0
+		},
+		property: {
+			id: `${id}_opacity_input`,
+			type: "number",
+			value: color.alpha.toString()
+		}
 	});
 	track.append(knob);
-	container.append(label, input, track);
+	slider.append(range, track);
+	container.append(label, slider, input);
 	return {
 		container,
 		input,
-		label
+		label,
+		range
 	};
 }
 function createColorPickerWell(parameters) {

package/dist/js/color-picker/{event.color-picker.d.mts → color-picker.event.d.mts}

@@ -1,8 +1,8 @@
-import { L as OuiColorPickerState, M as OuiColorPickerMovement } from "../constants.color-picker-B-gFjL8m.mjs";
-//#region src/js/color-picker/event.color-picker.d.ts
+import { B as OuiColorPickerState, F as OuiColorPickerMovement } from "../color-picker.constants-BZgXQr5o.mjs";
+//#region src/js/color-picker/color-picker.event.d.ts
 export declare function onColorPickerHue(state: OuiColorPickerState): void;
 export declare function onColorPickerInput(state: OuiColorPickerState): void;
-export declare function onColorPickerOpacity(state: OuiColorPickerState): void;
+export declare function onColorPickerOpacity(state: OuiColorPickerState, input: HTMLInputElement): void;
 export declare function onColorPickerOutputFormat(state: OuiColorPickerState): void;
 export declare function onColorPickerOutputValue(event: Event, state: OuiColorPickerState): void;
 export declare const colorPickerMovement: OuiColorPickerMovement;