@oscarpalmer/oui 0.37.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,5 +1,6 @@
 /*! https://github.com/oscarpalmer/oui */
 
+
 :where(.oui-pill, .oui-tag) {
   --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 50%);
   --oui-shadow-value: var(--oui-gray-6);

package/dist/css/button.css

@@ -1,5 +1,6 @@
 /*! https://github.com/oscarpalmer/oui */
 
+
 :where(.oui-button) {
   --oui-background-percentage: 25%;
   --oui-background-value: var(--oui-gray-2);
@@ -41,6 +42,10 @@
 }
 :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%;

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));

package/dist/css/combobox.css

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 /*! https://github.com/oscarpalmer/oui */
 
+
+
+
 :where([oui-combobox-anchor]) {
   --oui-outline-percentage: 100%;
   --oui-outline-value: var(--oui-blue-6);
@@ -350,6 +353,10 @@
 }
 :where([oui-combobox-selection-item]):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-combobox-selection-item]):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
 }
 :where([oui-combobox-selection-item])[disabled], :where([oui-combobox-selection-item])[aria-disabled=true i] {
   --oui-background-percentage: 80%;

package/dist/css/content.css

@@ -1,5 +1,6 @@
 /*! https://github.com/oscarpalmer/oui */
 
+
 :where(.oui-card) {
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 2px 4px -1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%);
   padding: 1em 1.25em;

package/dist/css/floatable.css

@@ -1,3 +1,5 @@
+/*! https://github.com/oscarpalmer/oui */
+
 
 :where([oui-dialog], [oui-popover], [oui-tooltip-content]),
 :where([oui-dialog])::backdrop {

package/dist/css/form.css

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 /*! https://github.com/oscarpalmer/oui */
 
+
+
+
 :where(.oui-fieldset) {
   padding: 1em;
   border: 1px solid var(--oui-gray-3);
@@ -160,6 +163,10 @@
 }
 :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i]):active {
   box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
+  scale: 0.95;
+}
+:where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where(.oui-input:is([type=file i]))::file-selector-button:not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
 }
 :where(.oui-input:is([type=file i]))::file-selector-button[disabled], :where(.oui-input:is([type=file i]))::file-selector-button[aria-disabled=true i] {
   --oui-background-percentage: 80%;

package/dist/css/listbox.css

@@ -1,6 +1,8 @@
 @charset "UTF-8";
 /*! https://github.com/oscarpalmer/oui */
 
+
+
 :where(oui-listbox, [oui-listbox-content]) {
   display: flex;
   flex-flow: column nowrap;

package/dist/css/message.css

@@ -1,5 +1,7 @@
 /*! https://github.com/oscarpalmer/oui */
 
+
+
 :where(.oui-message) {
   --oui-background: var(--oui-gray-1);
   --oui-border: var(--oui-gray-2);

package/dist/css/mixins/badge.mixins.css

@@ -0,0 +1,2 @@
+
+

package/dist/css/mixins/button.mixins.css

@@ -0,0 +1,2 @@
+
+

package/dist/css/mixins/message.mixins.css

@@ -0,0 +1 @@
+

package/dist/css/mixins/misc.mixins.css

@@ -0,0 +1,2 @@
+
+

package/dist/css/mixins/shadow.mixins.css

@@ -0,0 +1 @@
+

package/dist/css/reset.css

@@ -227,9 +227,9 @@ summary) {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding-right: 1em;
+  padding-right: 1.5em;
   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;
+  background-position: right 0.5em center;
   background-repeat: no-repeat;
   border-radius: 0;
 }

package/dist/css/splitter.css

@@ -1,4 +1,4 @@
-
+/*! https://github.com/oscarpalmer/oui */
 :where(oui-splitter) {
   display: flex;
   flex-flow: row nowrap;

package/dist/css/tabs.css

@@ -1,8 +1,10 @@
+/*! https://github.com/oscarpalmer/oui */
+
 
 :where(oui-tabs) {
   display: flex;
 }
-:where(oui-tabs[orientation=horizontal i]) {
+:where(oui-tabs:not([orientation=horizontal i])) {
   flex-flow: column nowrap;
 }
 :where(oui-tabs[orientation=vertical i]) {
@@ -13,14 +15,9 @@
   padding: 1em;
   flex: 1;
   background-color: var(--oui-absolute);
-}
-:where(oui-tabs[orientation=horizontal i] > [oui-tabs-content]) {
-  border-radius: 0 0 0.5em 0.5em;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 0 2px 4px -1px rgba(0, 0, 0, 0.05);
-}
-:where(oui-tabs[orientation=vertical i] > [oui-tabs-content]) {
-  border-radius: 0 0.5em 0.5em 0;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 1px 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 2px 2px 4px -1px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--oui-gray-3);
+  position: relative;
+  z-index: 0;
 }
 
 :where([oui-tabs-tab]) {
@@ -64,6 +61,10 @@
 }
 :where([oui-tabs-tab]):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-tabs-tab]):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
 }
 :where([oui-tabs-tab])[disabled], :where([oui-tabs-tab])[aria-disabled=true i] {
   --oui-background-percentage: 80%;
@@ -72,10 +73,8 @@
   font-style: italic;
 }
 :where([oui-tabs-tab]) {
-  --oui-background-value: var(--oui-blue-3);
-  --oui-foreground-value: var(--oui-blue-8);
-  --oui-outline-value: var(--oui-blue-6);
-  font-size: 0.875rem;
+  font-size: 0.75rem;
+  flex-shrink: 0;
   align-self: flex-end;
 }
 :where([oui-tabs-tab][aria-selected=true i]) {
@@ -86,18 +85,19 @@
 :where([oui-tabs-tablist]) {
   display: flex;
   gap: 0.5em;
+  position: relative;
+  z-index: 0;
 }
-:where([oui-tabs-tablist][aria-orientation=horizontal i]) {
-  flex-flow: row nowrap;
+:where([oui-tabs-tablist]:focus-within) {
+  z-index: 1;
 }
-:where([oui-tabs-tablist][aria-orientation=horizontal i] > [oui-tabs-tab]) {
-  border-radius: 0.25em 0.25em 0 0;
+:where([oui-tabs-tablist][aria-orientation=horizontal i]) {
+  margin: 0 0 0.5em;
+  flex-flow: row wrap;
 }
 :where([oui-tabs-tablist][aria-orientation=vertical i]) {
-  flex-flow: column nowrap;
-}
-:where([oui-tabs-tablist][aria-orientation=vertical i] > [oui-tabs-tab]) {
-  border-radius: 0.25em 0 0 0.25em;
+  margin: 0 0.5em 0 0;
+  flex-flow: column wrap;
 }