@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/css/combobox.css

@@ -1,20 +1,73 @@
 @charset "UTF-8";
 /*! https://github.com/oscarpalmer/oui */
 
+
+
+
 :where([oui-combobox-anchor]) {
-  --oui-background-percentage: 0%;
-  --oui-foreground-percentage: 0%;
   --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;
-  transition: 0.125s ease-in-out;
+  --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-combobox-anchor]).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-combobox-anchor]).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-combobox-anchor]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-combobox-anchor]):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-combobox-anchor]):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-combobox-anchor]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where([oui-combobox-anchor]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-combobox-anchor]):is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where([oui-combobox-anchor]) {
   --oui-background-value: var(--oui-absolute);
   padding: 0.5em 2em 0.5em 0.75em;
   border-radius: 0.25em;
@@ -24,7 +77,7 @@
   background-size: 1em;
   position: relative;
 }
-:where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):focus), :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):focus-within), :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):has(+ [oui-combobox-content]:focus-within)) {
+:where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, [oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within, [oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):has(+ [oui-combobox-content]:focus-within)) {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
@@ -43,7 +96,7 @@
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus) {
+:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, [oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within, [oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):has(+ [oui-combobox-content]:focus-within)) {
   --oui-outline-percentage: 75%;
 }
 :where([oui-combobox-anchor]:is([disabled], [aria-disabled=true i])) {
@@ -67,16 +120,16 @@
   inset-block: var(--margin-top) var(--margin-bottom);
   inset-inline: var(--margin-left) var(--margin-right);
 }
-:where([oui-combobox-content])[oui-position$=bottom] {
+:where([oui-combobox-content])[oui-position$=bottom i] {
   --margin-bottom: 0;
 }
-:where([oui-combobox-content])[oui-position$=end] {
+:where([oui-combobox-content])[oui-position$=end i] {
   --margin-right: 0;
 }
-:where([oui-combobox-content])[oui-position$=start] {
+:where([oui-combobox-content])[oui-position$=start i] {
   --margin-left: 0;
 }
-:where([oui-combobox-content])[oui-position$=top] {
+:where([oui-combobox-content])[oui-position$=top i] {
   --margin-top: 0;
 }
 :where([oui-combobox-content]) {
@@ -114,35 +167,51 @@
 }
 
 :where([oui-combobox-filter-input]) {
-  --oui-background-percentage: 0%;
-  --oui-foreground-percentage: 0%;
   --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;
-  transition: 0.125s ease-in-out;
+  --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));
-  --oui-background-value: var(--oui-absolute);
-  --oui-border-value: var(--oui-yellow-3);
-  width: 100%;
-  padding: 0.5em 0.75em;
-  outline-width: 0;
-  border-radius: 0.25em;
-  font-size: 0.875rem;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where([oui-combobox-filter-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(:where([oui-combobox-filter-input]):focus) {
+:where([oui-combobox-filter-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-combobox-filter-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-combobox-filter-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(:where([oui-combobox-filter-input]):hover) {
+  :where([oui-combobox-filter-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;
@@ -150,16 +219,25 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i])) {
+:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus) {
+:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
   --oui-outline-percentage: 75%;
 }
-:where(:where([oui-combobox-filter-input]):is([disabled], [aria-disabled=true i])) {
+:where([oui-combobox-filter-input]):is([disabled], [aria-disabled=true i]) {
   --oui-background-percentage: 50%;
 }
+:where([oui-combobox-filter-input]) {
+  --oui-background-value: var(--oui-absolute);
+  --oui-border-value: var(--oui-yellow-3);
+  width: 100%;
+  padding: 0.5em 0.75em;
+  outline-width: 0;
+  border-radius: 0.25em;
+  font-size: 0.875rem;
+}
 
 :where([oui-combobox-header]) {
   padding: 0.5em 1em;
@@ -199,7 +277,6 @@
   outline-offset: -4px;
   line-height: 1.25;
   cursor: pointer;
-  transition: 0.125s ease-in-out;
 }
 :where([oui-combobox-option][aria-selected=true i]) {
   background-color: var(--oui-blue-3);
@@ -210,7 +287,7 @@
   margin: 0 0.75em 0 0;
 }
 @media (hover: hover) {
-  :where(:where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-option]):hover) {
+  :where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-combobox-option]:hover) {
     background-color: var(--oui-blue-1);
     color: var(--oui-blue-8);
   }
@@ -237,31 +314,60 @@
 
 :where([oui-combobox-selection-item]) {
   --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;
-  --oui-background-value: var(--oui-blue-1);
-  --oui-foreground-percentage: 12.5%;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-combobox-selection-item]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-combobox-selection-item]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+: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%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-combobox-selection-item]) {
+  --oui-background-value: var(--oui-blue-2);
   --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-6);
   --oui-shadow-percentage: 90%;
   padding: 0.5em 1em;
   flex-wrap: nowrap;

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;
@@ -31,7 +32,7 @@
   mask-position: center;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
-  transition: 0.125s ease-in-out;
+  transition: transform 0.125s ease-in-out;
   transform: rotate(-90deg);
 }
 :where(.oui-details > summary):focus-visible {
@@ -75,7 +76,7 @@
   border-radius: 0.375em;
 }
 :where(.oui-meter)::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -85,7 +86,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter):-moz-meter-optimum::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -95,7 +96,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter):-moz-meter-sub-optimum::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -105,7 +106,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -120,7 +121,7 @@
   background: none;
 }
 :where(.oui-meter)::-webkit-meter-even-less-good-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -130,7 +131,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter)::-webkit-meter-optimum-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -140,7 +141,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter)::-webkit-meter-suboptimum-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -163,7 +164,7 @@
   border-radius: 0.375em;
 }
 :where(.oui-progress)::-moz-progress-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -178,7 +179,7 @@
   background: none;
 }
 :where(.oui-progress)::-webkit-progress-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--oui-absolute), transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -188,4 +189,23 @@
   border-radius: 0.25em;
 }
 
+:where(.oui-shadow), :where(.oui-shadow-0) {
+  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);
+}
+:where(.oui-shadow-1) {
+  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);
+}
+:where(.oui-shadow-2) {
+  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);
+}
+:where(.oui-shadow-3) {
+  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);
+}
+:where(.oui-shadow-4) {
+  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);
+}
+:where(.oui-shadow-5) {
+  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);
+}
+
 

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 {
@@ -47,16 +49,16 @@
   inset-block: var(--margin-top) var(--margin-bottom);
   inset-inline: var(--margin-left) var(--margin-right);
 }
-:where([oui-popover], [oui-tooltip-content])[oui-position$=bottom] {
+:where([oui-popover], [oui-tooltip-content])[oui-position$=bottom i] {
   --margin-bottom: 0;
 }
-:where([oui-popover], [oui-tooltip-content])[oui-position$=end] {
+:where([oui-popover], [oui-tooltip-content])[oui-position$=end i] {
   --margin-right: 0;
 }
-:where([oui-popover], [oui-tooltip-content])[oui-position$=start] {
+:where([oui-popover], [oui-tooltip-content])[oui-position$=start i] {
   --margin-left: 0;
 }
-:where([oui-popover], [oui-tooltip-content])[oui-position$=top] {
+:where([oui-popover], [oui-tooltip-content])[oui-position$=top i] {
   --margin-top: 0;
 }
 
@@ -105,24 +107,24 @@ var)) {
   display: block;
   position: absolute;
 }
-:where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
+:where([oui-tooltip-content])[oui-position^=above i]::after, :where([oui-tooltip-content])[oui-position^=below i]::after, :where([oui-tooltip-content])[oui-position^=bottom i]::after, :where([oui-tooltip-content])[oui-position^=top i]::after {
   width: 100%;
   height: 1em;
 }
-:where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
+:where([oui-tooltip-content])[oui-position^=above i]::after, :where([oui-tooltip-content])[oui-position^=top i]::after {
   inset: calc(100% - 0.5em) 0 0;
 }
-:where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after {
+:where([oui-tooltip-content])[oui-position^=below i]::after, :where([oui-tooltip-content])[oui-position^=bottom i]::after {
   inset: -0.5em 0 0;
 }
-:where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=right]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
+:where([oui-tooltip-content])[oui-position^=end i]::after, :where([oui-tooltip-content])[oui-position^=left i]::after, :where([oui-tooltip-content])[oui-position^=right i]::after, :where([oui-tooltip-content])[oui-position^=start i]::after {
   width: 1em;
   height: 100%;
 }
-:where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=right]::after {
+:where([oui-tooltip-content])[oui-position^=end i]::after, :where([oui-tooltip-content])[oui-position^=right i]::after {
   inset: 0 0 0 -0.5em;
 }
-:where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
+:where([oui-tooltip-content])[oui-position^=left i]::after, :where([oui-tooltip-content])[oui-position^=start i]::after {
   inset: 0 0 0 calc(100% - 0.5em);
 }