@oscarpalmer/oui 0.7.0 → 0.9.0

package/dist/css/{badges.css → badge.css}

@@ -2,9 +2,9 @@
   display: inline-flex;
   flex-flow: row nowrap;
   gap: 0.5em;
-  background-color: var(--background, var(--oui-grey-1, #eee));
-  border: 1px solid var(--border, var(--oui-grey-3, #ccc));
-  color: var(--foreground, var(--oui-grey-8, #333));
+  background-color: var(--background, var(--oui-gray-1));
+  border: 1px solid var(--border, var(--oui-gray-3));
+  color: var(--foreground, var(--oui-gray-8));
   line-height: 1.125;
 }
 :where(.oui-pill) {
@@ -27,30 +27,30 @@
 :where(.oui-pill-blue, .oui-tag-blue) {
   --background: var(--oui-blue-1);
   --border: var(--oui-blue-3);
-  --foreground: var(--oui-blue-9);
+  --foreground: var(--oui-blue-8);
 }
 :where(.oui-pill-green, .oui-tag-green) {
   --background: var(--oui-green-1);
   --border: var(--oui-green-3);
-  --foreground: var(--oui-green-9);
+  --foreground: var(--oui-green-8);
 }
 :where(.oui-pill-orange, .oui-tag-orange) {
   --background: var(--oui-orange-1);
   --border: var(--oui-orange-3);
-  --foreground: var(--oui-orange-9);
+  --foreground: var(--oui-orange-8);
 }
 :where(.oui-pill-purple, .oui-tag-purple) {
   --background: var(--oui-purple-1);
   --border: var(--oui-purple-3);
-  --foreground: var(--oui-purple-9);
+  --foreground: var(--oui-purple-8);
 }
 :where(.oui-pill-red, .oui-tag-red) {
   --background: var(--oui-red-1);
   --border: var(--oui-red-3);
-  --foreground: var(--oui-red-9);
+  --foreground: var(--oui-red-8);
 }
 :where(.oui-pill-yellow, .oui-tag-yellow) {
   --background: var(--oui-yellow-1);
   --border: var(--oui-yellow-3);
-  --foreground: var(--oui-yellow-9);
+  --foreground: var(--oui-yellow-8);
 }

package/dist/css/color.css

@@ -0,0 +1,102 @@
+:root {
+  --oui-absolute: light-dark(white, black);
+  --oui-blue-0: light-dark(oklch(0.98 0.015 260), oklch(0.18 0.1 250));
+  --oui-blue-1: light-dark(oklch(0.95 0.03 259), oklch(0.24 0.12 251));
+  --oui-blue-2: light-dark(oklch(0.9 0.05 258), oklch(0.32 0.14 252));
+  --oui-blue-3: light-dark(oklch(0.83 0.07 257), oklch(0.4 0.16 253));
+  --oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.5 0.14 254));
+  --oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.6 0.11 255));
+  --oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.7 0.09 256));
+  --oui-blue-7: light-dark(oklch(0.48 0.16 253), oklch(0.78 0.07 257));
+  --oui-blue-8: light-dark(oklch(0.34 0.14 252), oklch(0.85 0.05 258));
+  --oui-blue-9: light-dark(oklch(0.22 0.12 251), oklch(0.91 0.03 259));
+  --oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.01 260));
+  --oui-green-0: light-dark(oklch(0.98 0.015 150), oklch(0.18 0.1 140));
+  --oui-green-1: light-dark(oklch(0.95 0.03 149), oklch(0.24 0.12 141));
+  --oui-green-2: light-dark(oklch(0.9 0.05 148), oklch(0.32 0.14 142));
+  --oui-green-3: light-dark(oklch(0.83 0.07 147), oklch(0.4 0.15 143));
+  --oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.5 0.14 144));
+  --oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.6 0.12 145));
+  --oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.7 0.09 146));
+  --oui-green-7: light-dark(oklch(0.48 0.15 143), oklch(0.78 0.07 147));
+  --oui-green-8: light-dark(oklch(0.34 0.14 142), oklch(0.85 0.05 148));
+  --oui-green-9: light-dark(oklch(0.22 0.12 141), oklch(0.91 0.03 149));
+  --oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
+  --oui-orange-0: light-dark(oklch(0.985 0.02 60), oklch(0.18 0.1 50));
+  --oui-orange-1: light-dark(oklch(0.95 0.03 59), oklch(0.24 0.11 51));
+  --oui-orange-2: light-dark(oklch(0.9 0.05 58), oklch(0.32 0.12 52));
+  --oui-orange-3: light-dark(oklch(0.83 0.08 57), oklch(0.4 0.13 53));
+  --oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.5 0.14 54));
+  --oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.6 0.13 55));
+  --oui-orange-6: light-dark(oklch(0.57 0.14 54), oklch(0.7 0.11 56));
+  --oui-orange-7: light-dark(oklch(0.46 0.13 53), oklch(0.78 0.08 57));
+  --oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.85 0.05 58));
+  --oui-orange-9: light-dark(oklch(0.22 0.11 51), oklch(0.91 0.03 59));
+  --oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.97 0.02 60));
+  --oui-purple-0: light-dark(oklch(0.98 0.015 300), oklch(0.18 0.1 290));
+  --oui-purple-1: light-dark(oklch(0.95 0.03 299), oklch(0.24 0.11 291));
+  --oui-purple-2: light-dark(oklch(0.9 0.05 298), oklch(0.32 0.12 292));
+  --oui-purple-3: light-dark(oklch(0.83 0.07 297), oklch(0.4 0.13 293));
+  --oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.5 0.12 294));
+  --oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.6 0.11 295));
+  --oui-purple-6: light-dark(oklch(0.58 0.12 294), oklch(0.7 0.09 296));
+  --oui-purple-7: light-dark(oklch(0.48 0.13 293), oklch(0.78 0.07 297));
+  --oui-purple-8: light-dark(oklch(0.34 0.12 292), oklch(0.85 0.05 298));
+  --oui-purple-9: light-dark(oklch(0.22 0.11 291), oklch(0.91 0.03 299));
+  --oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
+  --oui-red-0: light-dark(oklch(0.98 0.015 15), oklch(0.18 0.1 25));
+  --oui-red-1: light-dark(oklch(0.95 0.025 16), oklch(0.24 0.125 24));
+  --oui-red-2: light-dark(oklch(0.9 0.045 17), oklch(0.32 0.15 23));
+  --oui-red-3: light-dark(oklch(0.83 0.08 18), oklch(0.4 0.17 22));
+  --oui-red-4: light-dark(oklch(0.75 0.11 19), oklch(0.5 0.16 21));
+  --oui-red-5: light-dark(oklch(0.67 0.15 20), oklch(0.6 0.15 20));
+  --oui-red-6: light-dark(oklch(0.58 0.16 21), oklch(0.7 0.11 19));
+  --oui-red-7: light-dark(oklch(0.48 0.17 22), oklch(0.78 0.08 18));
+  --oui-red-8: light-dark(oklch(0.34 0.15 23), oklch(0.85 0.045 17));
+  --oui-red-9: light-dark(oklch(0.22 0.125 24), oklch(0.91 0.025 16));
+  --oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
+  --oui-yellow-0: light-dark(oklch(0.985 0.02 100), oklch(0.18 0.1 90));
+  --oui-yellow-1: light-dark(oklch(0.955 0.04 99), oklch(0.24 0.12 91));
+  --oui-yellow-2: light-dark(oklch(0.915 0.08 98), oklch(0.32 0.14 92));
+  --oui-yellow-3: light-dark(oklch(0.865 0.12 97), oklch(0.4 0.16 93));
+  --oui-yellow-4: light-dark(oklch(0.805 0.14 96), oklch(0.5 0.18 94));
+  --oui-yellow-5: light-dark(oklch(0.735 0.16 95), oklch(0.6 0.16 95));
+  --oui-yellow-6: light-dark(oklch(0.635 0.18 94), oklch(0.7 0.14 96));
+  --oui-yellow-7: light-dark(oklch(0.515 0.16 93), oklch(0.78 0.12 97));
+  --oui-yellow-8: light-dark(oklch(0.385 0.14 92), oklch(0.85 0.08 98));
+  --oui-yellow-9: light-dark(oklch(0.255 0.12 91), oklch(0.91 0.04 99));
+  --oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.97 0.02 100));
+  --oui-gray-0: light-dark(oklch(0.99 0 0), oklch(0.18 0 0));
+  --oui-gray-1: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
+  --oui-gray-2: light-dark(oklch(0.94 0 0), oklch(0.32 0 0));
+  --oui-gray-3: light-dark(oklch(0.88 0 0), oklch(0.4 0 0));
+  --oui-gray-4: light-dark(oklch(0.78 0 0), oklch(0.5 0 0));
+  --oui-gray-5: light-dark(oklch(0.67 0 0), oklch(0.6 0 0));
+  --oui-gray-6: light-dark(oklch(0.58 0 0), oklch(0.7 0 0));
+  --oui-gray-7: light-dark(oklch(0.48 0 0), oklch(0.78 0 0));
+  --oui-gray-8: light-dark(oklch(0.34 0 0), oklch(0.85 0 0));
+  --oui-gray-9: light-dark(oklch(0.22 0 0), oklch(0.91 0 0));
+  --oui-gray-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
+  --oui-slate-0: light-dark(oklch(0.99 0.0033 255), oklch(0.18 0.005 255));
+  --oui-slate-1: light-dark(oklch(0.97 0.0067 255), oklch(0.24 0.0075 255));
+  --oui-slate-2: light-dark(oklch(0.94 0.01 255), oklch(0.32 0.01 255));
+  --oui-slate-3: light-dark(oklch(0.88 0.0125 255), oklch(0.4 0.0125 255));
+  --oui-slate-4: light-dark(oklch(0.78 0.015 255), oklch(0.5 0.015 255));
+  --oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.6 0.02 255));
+  --oui-slate-6: light-dark(oklch(0.58 0.015 255), oklch(0.7 0.015 255));
+  --oui-slate-7: light-dark(oklch(0.48 0.0125 255), oklch(0.78 0.0125 255));
+  --oui-slate-8: light-dark(oklch(0.34 0.01 255), oklch(0.85 0.01 255));
+  --oui-slate-9: light-dark(oklch(0.22 0.0075 255), oklch(0.91 0.0075 255));
+  --oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
+  --oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.18 0.005 95));
+  --oui-stone-1: light-dark(oklch(0.97 0.0067 95), oklch(0.24 0.0075 95));
+  --oui-stone-2: light-dark(oklch(0.94 0.01 95), oklch(0.32 0.01 95));
+  --oui-stone-3: light-dark(oklch(0.88 0.0125 95), oklch(0.4 0.0125 95));
+  --oui-stone-4: light-dark(oklch(0.78 0.015 95), oklch(0.5 0.015 95));
+  --oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.6 0.02 95));
+  --oui-stone-6: light-dark(oklch(0.58 0.015 95), oklch(0.7 0.015 95));
+  --oui-stone-7: light-dark(oklch(0.48 0.0125 95), oklch(0.78 0.0125 95));
+  --oui-stone-8: light-dark(oklch(0.34 0.01 95), oklch(0.85 0.01 95));
+  --oui-stone-9: light-dark(oklch(0.22 0.0075 95), oklch(0.91 0.0075 95));
+  --oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
+}

package/dist/css/form.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 :where(.oui-fieldset) {
   padding: 1em;
-  border: 1px solid var(--oui-grey-3);
+  border: 1px solid var(--oui-gray-3);
   border-radius: 0.25em;
 }
 
@@ -10,9 +10,9 @@
   outline: 3px solid transparent;
   outline-offset: 0;
   background-color: var(--oui-absolute);
-  border-color: var(--oui-grey-3);
+  border-color: var(--oui-gray-3);
   border-radius: 0.25em;
-  box-shadow: inset 0 1px 2px 0 color-mix(in srgb, var(--oui-grey-10), transparent 80%);
+  box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
   transition: 0.125s ease-in-out;
 }
 :where(.oui-input:not(textarea)) {
@@ -32,30 +32,30 @@
 }
 :where(.oui-input.oui-validateable:not([disabled], [aria-disabled=true]):is(:user-invalid,
 [aria-invalid=true])) {
-  outline-color: color-mix(in srgb, var(--oui-red-6), transparent 60%);
+  outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
   border-color: var(--oui-red-6);
 }
 :where(.oui-input.oui-validateable:not([disabled], [aria-disabled=true]):is(:user-valid,
 [aria-invalid=false])) {
-  outline-color: color-mix(in srgb, var(--oui-green-6), transparent 60%);
+  outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
   border-color: var(--oui-green-6);
 }
 :where(.oui-input:not([disabled], [aria-disabled=true]):focus) {
-  outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
+  outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
   border-color: var(--oui-blue-6);
 }
 @media (hover: hover) {
   :where(.oui-input:not([disabled], [aria-disabled=true]):hover) {
-    outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
+    outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
     border-color: var(--oui-blue-6);
   }
 }
 :where(.oui-input[readonly]) {
-  color: color-mix(in srgb, currentColor, transparent 12.5%);
+  color: color-mix(in oklab, currentColor, transparent 12.5%);
 }
 :where(.oui-input[disabled], .oui-input[aria-disabled=true]) {
-  background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
-  color: color-mix(in srgb, currentColor, transparent 25%);
+  background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
+  color: color-mix(in oklab, currentColor, transparent 25%);
 }
 
 :where(select.oui-input) {
@@ -80,7 +80,7 @@
 
 :where(.oui-legend) {
   padding: 0.5em;
-  border: 1px solid var(--oui-grey-3);
+  border: 1px solid var(--oui-gray-3);
   border-radius: 0.25em;
 }
 
@@ -107,8 +107,8 @@
   width: 2.5em;
   height: 1.5em;
   display: inline-block;
-  background-color: var(--oui-grey-0);
-  border: 1px solid var(--oui-grey-3);
+  background-color: var(--oui-gray-0);
+  border: 1px solid var(--oui-gray-3);
   border-radius: 3em;
   right: 0;
 }
@@ -119,7 +119,7 @@
   background-color: var(--oui-absolute);
   border-radius: 1.5em;
   box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
-  color: var(--oui-grey-8);
+  color: var(--oui-gray-8);
   font-size: 0.75em;
   font-weight: bold;
   line-height: 1.5em;
@@ -143,7 +143,7 @@
   height: 1.5em;
   display: inline-block;
   background-color: transparent;
-  border: 1px solid var(--oui-grey-4);
+  border: 1px solid var(--oui-gray-4);
   inset: 0 auto auto 0;
 }
 :where(.oui-toggle)::after {
@@ -189,7 +189,7 @@
 }
 :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):focus-within,
 .oui-toggle:has(input:not([disabled], [aria-disabled=true])):focus-within)::before {
-  outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
+  outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
   border-color: var(--oui-absolute);
 }
 @media (hover: hover) {
@@ -199,12 +199,12 @@
   }
   :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):hover,
   .oui-toggle:has(input:not([disabled], [aria-disabled=true])):hover)::before {
-    outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
+    outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
     border-color: var(--oui-blue-6);
   }
   :where(.oui-switch:has(input:not([disabled], [aria-disabled=true]):is(:checked)):hover,
   .oui-toggle:has(input:not([disabled], [aria-disabled=true]):is(:checked)):hover)::before {
-    background-color: color-mix(in srgb, var(--oui-blue-6), transparent 40%);
+    background-color: color-mix(in oklab, var(--oui-blue-6), transparent 40%);
   }
 }
 :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
@@ -212,18 +212,21 @@
   cursor: default;
 }
 :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
-.oui-toggle:has(input[disabled], input[aria-disabled=true])), :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
+.oui-toggle:has(input[disabled], input[aria-disabled=true])) {
+  color: color-mix(in oklab, currentColor, transparent 25%);
+}
+:where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
 .oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
-  color: color-mix(in srgb, currentColor, transparent 25%);
+  color: color-mix(in oklab, currentColor, transparent);
 }
 :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
 .oui-toggle:has(input[disabled], input[aria-disabled=true]))::before {
-  background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
-  border-color: var(--oui-grey-3);
+  background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
+  border-color: var(--oui-gray-3);
 }
 :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
 .oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
-  box-shadow: 0 0 0 1px var(--oui-grey-3);
+  box-shadow: 0 0 0 1px var(--oui-gray-3);
   text-shadow: none;
 }
 

package/dist/css/message.css

@@ -3,10 +3,10 @@
   display: inline-flex;
   flex-flow: column nowrap;
   gap: 1em;
-  background-color: var(--background, var(--oui-grey-0, #eee));
-  border: 1px solid var(--border, var(--oui-grey-2, #ccc));
+  background-color: var(--background, var(--oui-gray-0));
+  border: 1px solid var(--border, var(--oui-gray-2));
   border-radius: 0.5em;
-  color: var(--foreground, var(--oui-grey-8, #333));
+  color: var(--foreground, var(--oui-gray-8));
   line-height: 1.25;
 }
 :where(.oui-message h2, .oui-message h3, .oui-message h4, .oui-message h5, .oui-message h6) {
@@ -16,7 +16,7 @@
 :where(.oui-message hr) {
   height: 1px;
   margin: 0 -1em;
-  background-color: var(--border, var(--oui-grey-2));
+  background-color: var(--border, var(--oui-gray-2));
   border: none;
 }
 :where(.oui-message p) {

package/dist/css/table.css

@@ -4,7 +4,7 @@
 :where(.oui-table-wrapper) {
   max-height: 32em;
   overflow: auto;
-  border: 1px solid var(--oui-grey-3);
+  border: 1px solid var(--oui-gray-3);
   border-radius: 0.25em;
   position: relative;
   overscroll-behavior-y: none;
@@ -12,8 +12,8 @@
 :where(.oui-table caption) {
   height: 2rem;
   align-content: center;
-  background-color: var(--oui-grey-1);
-  border: solid var(--oui-grey-3);
+  background-color: var(--oui-gray-1);
+  border: solid var(--oui-gray-3);
   border-width: 0 0 1px 0;
   font-size: 0.875rem;
   text-align: left;
@@ -23,11 +23,11 @@
   z-index: 2;
 }
 :where(.oui-table tbody tr:nth-child(2n)) {
-  background-color: var(--oui-blue-0);
+  background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
 }
 :where(.oui-table th, .oui-table tfoot td) {
-  background-color: var(--oui-grey-1);
-  border: solid var(--oui-grey-3);
+  background-color: var(--oui-gray-1);
+  border: solid var(--oui-gray-3);
   border-width: 0 1px 0 0;
   position: sticky;
   left: 0;
@@ -35,7 +35,7 @@
 }
 :where(.oui-table th, .oui-table tfoot td)::after {
   content: "";
-  border-bottom: 1px solid var(--oui-grey-3);
+  border-bottom: 1px solid var(--oui-gray-3);
   position: absolute;
 }
 :where(.oui-table th, .oui-table td) {
@@ -54,7 +54,7 @@
   inset: 0 0 auto 0;
 }
 :where(.oui-table tbody td) {
-  border: solid var(--oui-grey-3);
+  border: solid var(--oui-gray-3);
   border-width: 0 1px 1px 0;
 }
 :where(.oui-table tbody tr:last-child td) {

package/dist/js/focus-trap.cjs

@@ -0,0 +1,147 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const number = require("@oscarpalmer/atoms/number");
+const event = require("@oscarpalmer/toretto/event");
+const find = require("@oscarpalmer/toretto/find");
+const focusable = require("@oscarpalmer/toretto/focusable");
+class FocusTrap {
+  constructor(element) {
+    __publicField(this, "active", true);
+    this.element = element;
+    element.setAttribute("aria-modal", "true");
+    element.setAttribute("tabindex", "-1");
+  }
+  activate() {
+    this.element.setAttribute("aria-modal", "true");
+    this.active = true;
+  }
+  destroy() {
+    this.active = false;
+    this.element = void 0;
+  }
+  inactivate() {
+    this.element.setAttribute("aria-modal", "false");
+    this.active = false;
+    inactive.add(this);
+  }
+}
+function addFocusTraps(nodes) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    if (element.hasAttribute(selector)) {
+      focusTraps.set(element, new FocusTrap(element));
+    }
+  }
+}
+function onEscape(event2) {
+  var _a;
+  if (event2.key !== "Escape") {
+    return;
+  }
+  const element = find.findAncestor(
+    document.activeElement,
+    `[${selector}]`
+  );
+  (_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
+}
+function onFocusOut() {
+  if (inactive.size === 0) {
+    return;
+  }
+  setTimeout(() => {
+    const element = find.findAncestor(
+      document.activeElement,
+      `[${selector}]`
+    );
+    if (!focusTraps.has(element)) {
+      for (const focusTrap of inactive) {
+        focusTrap.activate();
+      }
+    }
+  }, 0);
+}
+function onTab(event2) {
+  var _a;
+  if (event2.key !== "Tab") {
+    return;
+  }
+  const element = find.findAncestor(
+    event2.target,
+    `[${selector}]`
+  );
+  if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
+    return;
+  }
+  event2.preventDefault();
+  const elements = focusable.getFocusable(element);
+  const { length } = elements;
+  const index = elements.indexOf(event2.target);
+  if (index === -1 || length === 0) {
+    if (length === 0) {
+      element.focus();
+    } else {
+      elements[0].focus();
+    }
+    return;
+  }
+  const next = number.clamp(index + (event2.shiftKey ? -1 : 1), 0, length - 1, true);
+  if (next !== index) {
+    elements[next].focus();
+  }
+}
+function removeFocusTraps(nodes) {
+  var _a;
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    (_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
+    focusTraps.delete(element);
+  }
+}
+const focusTraps = /* @__PURE__ */ new WeakMap();
+const inactive = /* @__PURE__ */ new Set();
+const observer = new MutationObserver((entries) => {
+  const { length } = entries;
+  for (let index = 0; index < length; index += 1) {
+    const entry = entries[index];
+    if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
+      if (entry.target.hasAttribute(selector)) {
+        addFocusTraps([entry.target]);
+      } else {
+        removeFocusTraps([entry.target]);
+      }
+    } else if (entry.type === "childList") {
+      addFocusTraps(entry.addedNodes);
+      removeFocusTraps(entry.removedNodes);
+    }
+  }
+});
+const selector = "oui-focus-trap";
+observer.observe(document, {
+  attributeFilter: [selector],
+  attributes: true,
+  childList: true,
+  subtree: true
+});
+setTimeout(() => {
+  addFocusTraps(document.querySelectorAll(`[${selector}]`));
+  event.on(document, "focusout", onFocusOut, {
+    capture: true
+  });
+  event.on(document, "keydown", onTab, {
+    capture: true,
+    passive: false
+  });
+  event.on(document, "keydown", onEscape, {
+    passive: false
+  });
+}, 0);

package/dist/js/focus-trap.js

@@ -0,0 +1,146 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { clamp } from "@oscarpalmer/atoms/number";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getFocusable } from "@oscarpalmer/toretto/focusable";
+class FocusTrap {
+  constructor(element) {
+    __publicField(this, "active", true);
+    this.element = element;
+    element.setAttribute("aria-modal", "true");
+    element.setAttribute("tabindex", "-1");
+  }
+  activate() {
+    this.element.setAttribute("aria-modal", "true");
+    this.active = true;
+  }
+  destroy() {
+    this.active = false;
+    this.element = void 0;
+  }
+  inactivate() {
+    this.element.setAttribute("aria-modal", "false");
+    this.active = false;
+    inactive.add(this);
+  }
+}
+function addFocusTraps(nodes) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    if (element.hasAttribute(selector)) {
+      focusTraps.set(element, new FocusTrap(element));
+    }
+  }
+}
+function onEscape(event) {
+  var _a;
+  if (event.key !== "Escape") {
+    return;
+  }
+  const element = findAncestor(
+    document.activeElement,
+    `[${selector}]`
+  );
+  (_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
+}
+function onFocusOut() {
+  if (inactive.size === 0) {
+    return;
+  }
+  setTimeout(() => {
+    const element = findAncestor(
+      document.activeElement,
+      `[${selector}]`
+    );
+    if (!focusTraps.has(element)) {
+      for (const focusTrap of inactive) {
+        focusTrap.activate();
+      }
+    }
+  }, 0);
+}
+function onTab(event) {
+  var _a;
+  if (event.key !== "Tab") {
+    return;
+  }
+  const element = findAncestor(
+    event.target,
+    `[${selector}]`
+  );
+  if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
+    return;
+  }
+  event.preventDefault();
+  const elements = getFocusable(element);
+  const { length } = elements;
+  const index = elements.indexOf(event.target);
+  if (index === -1 || length === 0) {
+    if (length === 0) {
+      element.focus();
+    } else {
+      elements[0].focus();
+    }
+    return;
+  }
+  const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
+  if (next !== index) {
+    elements[next].focus();
+  }
+}
+function removeFocusTraps(nodes) {
+  var _a;
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    (_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
+    focusTraps.delete(element);
+  }
+}
+const focusTraps = /* @__PURE__ */ new WeakMap();
+const inactive = /* @__PURE__ */ new Set();
+const observer = new MutationObserver((entries) => {
+  const { length } = entries;
+  for (let index = 0; index < length; index += 1) {
+    const entry = entries[index];
+    if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
+      if (entry.target.hasAttribute(selector)) {
+        addFocusTraps([entry.target]);
+      } else {
+        removeFocusTraps([entry.target]);
+      }
+    } else if (entry.type === "childList") {
+      addFocusTraps(entry.addedNodes);
+      removeFocusTraps(entry.removedNodes);
+    }
+  }
+});
+const selector = "oui-focus-trap";
+observer.observe(document, {
+  attributeFilter: [selector],
+  attributes: true,
+  childList: true,
+  subtree: true
+});
+setTimeout(() => {
+  addFocusTraps(document.querySelectorAll(`[${selector}]`));
+  on(document, "focusout", onFocusOut, {
+    capture: true
+  });
+  on(document, "keydown", onTab, {
+    capture: true,
+    passive: false
+  });
+  on(document, "keydown", onEscape, {
+    passive: false
+  });
+}, 0);

package/dist/js/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./focus-trap.cjs");

package/dist/js/index.js

@@ -0,0 +1 @@
+import "./focus-trap.js";