@flux-ui/components 3.0.0-next.2 → 3.0.0-next.21

package/src/css/mixin/focus-ring.scss

@@ -1,10 +1,10 @@
 @mixin focus-outline {
-    outline: 2px solid rgb(var(--primary-7) / 0);
+    outline: 2px solid oklch(from var(--primary-7) l c h / 0);
     outline-offset: 0;
 }
 
 @mixin focus-outline-visible($offset: 0) {
-    outline-color: rgb(var(--primary-7));
+    outline-color: var(--primary-7);
     outline-offset: $offset;
 }
 

package/src/css/typography.scss

@@ -33,7 +33,7 @@
     }
 
     a:not([class]), a[class=""] {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
         text-decoration: underline;
         text-decoration-thickness: 1px;
         text-underline-offset: 4px;
@@ -51,7 +51,7 @@
         position: relative;
         margin: 0 0 0 30px;
         padding: 15px 21px;
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
         border-radius: var(--radius);
 
         &::before {
@@ -59,7 +59,7 @@
             top: 5px;
             left: -27px;
             content: '”';
-            color: rgb(var(--primary-7));
+            color: var(--primary-7);
             font-size: 39px;
             font-weight: 700;
         }

package/src/css/variables.scss

@@ -1,9 +1,5 @@
 @use 'sass:color';
 
-@function -rgb($hex) {
-    @return color.channel($hex, 'red', $space: rgb) color.channel($hex, 'green', $space: rgb) color.channel($hex, 'blue', $space: rgb);
-}
-
 @mixin animation {
     --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
     --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
@@ -12,203 +8,202 @@
 }
 
 @mixin color-light {
-    --primary-0: #{-rgb(#ffffff)};
-    --primary-1: #{-rgb(#f5f8ff)};
-    --primary-2: #{-rgb(#eff4ff)};
-    --primary-3: #{-rgb(#d1e0ff)};
-    --primary-4: #{-rgb(#b2ccff)};
-    --primary-5: #{-rgb(#84adff)};
-    --primary-6: #{-rgb(#528bff)};
-    --primary-7: #{-rgb(#2970ff)};
-    --primary-8: #{-rgb(#155eef)};
-    --primary-9: #{-rgb(#004eeb)};
-    --primary-10: #{-rgb(#0040c1)};
-    --primary-11: #{-rgb(#00359e)};
-
-    --danger-0: #{-rgb(#ffffff)};
-    --danger-1: #{-rgb(#fff1f2)};
-    --danger-2: #{-rgb(#ffe4e6)};
-    --danger-3: #{-rgb(#ffccd3)};
-    --danger-4: #{-rgb(#ffa1ad)};
-    --danger-5: #{-rgb(#ff637e)};
-    --danger-6: #{-rgb(#ff2056)};
-    --danger-7: #{-rgb(#ec003f)};
-    --danger-8: #{-rgb(#c70036)};
-    --danger-9: #{-rgb(#a50036)};
-    --danger-10: #{-rgb(#8b0836)};
-    --danger-11: #{-rgb(#4d0218)};
-
-    --info-0: #{-rgb(#ffffff)};
-    --info-1: #{-rgb(#eff6ff)};
-    --info-2: #{-rgb(#dbeafe)};
-    --info-3: #{-rgb(#bedbff)};
-    --info-4: #{-rgb(#8ec5ff)};
-    --info-5: #{-rgb(#51a2ff)};
-    --info-6: #{-rgb(#2b7fff)};
-    --info-7: #{-rgb(#155dfc)};
-    --info-8: #{-rgb(#1447e6)};
-    --info-9: #{-rgb(#193cb8)};
-    --info-10: #{-rgb(#1c398e)};
-    --info-11: #{-rgb(#162456)};
-
-    --success-0: #{-rgb(#ffffff)};
-    --success-1: #{-rgb(#f0fdf4)};
-    --success-2: #{-rgb(#dcfce7)};
-    --success-3: #{-rgb(#b9f8cf)};
-    --success-4: #{-rgb(#7bf1a8)};
-    --success-5: #{-rgb(#05df72)};
-    --success-6: #{-rgb(#00c950)};
-    --success-7: #{-rgb(#00a63e)};
-    --success-8: #{-rgb(#008236)};
-    --success-9: #{-rgb(#016630)};
-    --success-10: #{-rgb(#0d542b)};
-    --success-11: #{-rgb(#032e15)};
-
-    --warning-0: #{-rgb(#ffffff)};
-    --warning-1: #{-rgb(#fffbeb)};
-    --warning-2: #{-rgb(#fef3c6)};
-    --warning-3: #{-rgb(#fee685)};
-    --warning-4: #{-rgb(#ffd230)};
-    --warning-5: #{-rgb(#ffb900)};
-    --warning-6: #{-rgb(#fe9a00)};
-    --warning-7: #{-rgb(#e17100)};
-    --warning-8: #{-rgb(#bb4d00)};
-    --warning-9: #{-rgb(#973c00)};
-    --warning-10: #{-rgb(#7b3306)};
-    --warning-11: #{-rgb(#461901)};
-
-    --gray-0: #{-rgb(#ffffff)};
-    --gray-1: #{-rgb(#f8fafc)};
-    --gray-2: #{-rgb(#f1f5f9)};
-    --gray-3: #{-rgb(#e2e8f0)};
-    --gray-4: #{-rgb(#cad5e2)};
-    --gray-5: #{-rgb(#90a1b9)};
-    --gray-6: #{-rgb(#62748e)};
-    --gray-7: #{-rgb(#45556c)};
-    --gray-8: #{-rgb(#314158)};
-    --gray-9: #{-rgb(#1d293d)};
-    --gray-10: #{-rgb(#0f172b)};
-    --gray-11: #{-rgb(#020618)};
+    --gray-0: oklch(100% 0 270);
+    --gray-1: oklch(98% 0.005 270);
+    --gray-2: oklch(95% 0.008 270);
+    --gray-3: oklch(91% 0.012 270);
+    --gray-4: oklch(84% 0.015 270);
+    --gray-5: oklch(72% 0.03 270);
+    --gray-6: oklch(64% 0.035 270);
+    --gray-7: oklch(52% 0.04 270);
+    --gray-8: oklch(40% 0.04 270);
+    --gray-9: oklch(32% 0.028 270);
+    --gray-10: oklch(24% 0.028 270);
+    --gray-11: oklch(16% 0.028 270);
+
+    --primary-0: oklch(99% 0 264);
+    --primary-1: oklch(96% 0.02 264);
+    --primary-2: oklch(92% 0.04 264);
+    --primary-3: oklch(88% 0.06 264);
+    --primary-4: oklch(80% 0.10 264);
+    --primary-5: oklch(72% 0.14 264);
+    --primary-6: oklch(64% 0.18 264);
+    --primary-7: oklch(52% 0.22 264);
+    --primary-8: oklch(40% 0.20 264);
+    --primary-9: oklch(32% 0.18 264);
+    --primary-10: oklch(24% 0.14 264);
+    --primary-11: oklch(16% 0.10 264);
+
+    --danger-0: oklch(99% 0.004 25);
+    --danger-1: oklch(96.9% 0.015 12);
+    --danger-2: oklch(94.1% 0.03 13);
+    --danger-3: oklch(89.2% 0.058 9);
+    --danger-4: oklch(80.6% 0.112 12);
+    --danger-5: oklch(70.6% 0.19 13);
+    --danger-6: oklch(64.3% 0.245 17);
+    --danger-7: oklch(59.7% 0.24 20);
+    --danger-8: oklch(52.5% 0.211 19);
+    --danger-9: oklch(45.9% 0.184 15);
+    --danger-10: oklch(41.1% 0.159 10);
+    --danger-11: oklch(27% 0.105 12);
+
+    --info-0: oklch(99% 0.005 235);
+    --info-1: oklch(97% 0.014 255);
+    --info-2: oklch(93.2% 0.032 256);
+    --info-3: oklch(88.2% 0.059 254);
+    --info-4: oklch(80.7% 0.101 250);
+    --info-5: oklch(70.4% 0.158 254);
+    --info-6: oklch(61.9% 0.207 259);
+    --info-7: oklch(54.7% 0.246 263);
+    --info-8: oklch(48.8% 0.243 264);
+    --info-9: oklch(42.4% 0.198 265);
+    --info-10: oklch(38% 0.145 265);
+    --info-11: oklch(28.1% 0.092 268);
+
+    --success-0: oklch(99% 0.005 145);
+    --success-1: oklch(98.2% 0.018 156);
+    --success-2: oklch(96.2% 0.043 157);
+    --success-3: oklch(92.6% 0.084 156);
+    --success-4: oklch(87% 0.149 155);
+    --success-5: oklch(79.1% 0.209 152);
+    --success-6: oklch(72.9% 0.212 148);
+    --success-7: oklch(63.2% 0.186 147);
+    --success-8: oklch(53% 0.149 149);
+    --success-9: oklch(44.7% 0.119 151);
+    --success-10: oklch(39.3% 0.096 152);
+    --success-11: oklch(26.5% 0.065 153);
+
+    --warning-0: oklch(99% 0.005 85);
+    --warning-1: oklch(98.7% 0.021 95);
+    --warning-2: oklch(96.2% 0.059 96);
+    --warning-3: oklch(92.4% 0.12 96);
+    --warning-4: oklch(87.8% 0.169 92);
+    --warning-5: oklch(82.9% 0.171 81);
+    --warning-6: oklch(77.2% 0.173 62);
+    --warning-7: oklch(66.7% 0.169 60);
+    --warning-8: oklch(55.7% 0.158 58);
+    --warning-9: oklch(47.5% 0.136 56);
+    --warning-10: oklch(41.5% 0.113 54);
+    --warning-11: oklch(27.9% 0.077 52);
 }
 
 @mixin color-dark {
-    //--primary-0: #{-rgb(#182035)};
-    //--primary-1: #{-rgb(#1f2a45)};
-    //--primary-2: #{-rgb(#243254)};
-    //--primary-3: #{-rgb(#2b3c63)};
-    //--primary-4: #{-rgb(#314471)};
-    //--primary-5: #{-rgb(#385080)};
-    //--primary-6: #{-rgb(#3e5a8e)};
-    //--primary-7: #{-rgb(#44669e)};
-    //--primary-8: #{-rgb(#5077b0)};
-    //--primary-9: #{-rgb(#5a84bf)};
-    //--primary-10: #{-rgb(#6594d1)};
-    //--primary-11: #{-rgb(#709fe3)};
-
-    --danger-0: #{-rgb(#272325)};
-    --danger-1: #{-rgb(#331e23)};
-    --danger-2: #{-rgb(#3e1f28)};
-    --danger-3: #{-rgb(#4c222e)};
-    --danger-4: #{-rgb(#5b2635)};
-    --danger-5: #{-rgb(#6a2b3e)};
-    --danger-6: #{-rgb(#7a3047)};
-    --danger-7: #{-rgb(#8b3552)};
-    --danger-8: #{-rgb(#9e3a5f)};
-    --danger-9: #{-rgb(#a53d6e)};
-    --danger-10: #{-rgb(#b63e7c)};
-    --danger-11: #{-rgb(#c8408c)};
-
-    --info-0: #{-rgb(#23262c)};
-    --info-1: #{-rgb(#1f2832)};
-    --info-2: #{-rgb(#243141)};
-    --info-3: #{-rgb(#2a3d52)};
-    --info-4: #{-rgb(#2f4a66)};
-    --info-5: #{-rgb(#34567b)};
-    --info-6: #{-rgb(#3b638f)};
-    --info-7: #{-rgb(#436fa3)};
-    --info-8: #{-rgb(#4b7bb7)};
-    --info-9: #{-rgb(#5588cb)};
-    --info-10: #{-rgb(#6094df)};
-    --info-11: #{-rgb(#6aa3f3)};
-
-    --success-0: #{-rgb(#1d2620)};
-    --success-1: #{-rgb(#222d26)};
-    --success-2: #{-rgb(#26342c)};
-    --success-3: #{-rgb(#2c4435)};
-    --success-4: #{-rgb(#33543e)};
-    --success-5: #{-rgb(#3a6547)};
-    --success-6: #{-rgb(#417651)};
-    --success-7: #{-rgb(#4b875d)};
-    --success-8: #{-rgb(#589967)};
-    --success-9: #{-rgb(#6eac74)};
-    --success-10: #{-rgb(#86ba86)};
-    --success-11: #{-rgb(#9bc89b)};
-
-    --warning-0: #{-rgb(#2b261a)};
-    --warning-1: #{-rgb(#332b1b)};
-    --warning-2: #{-rgb(#3d321e)};
-    --warning-3: #{-rgb(#4a3c21)};
-    --warning-4: #{-rgb(#554825)};
-    --warning-5: #{-rgb(#63552a)};
-    --warning-6: #{-rgb(#74602f)};
-    --warning-7: #{-rgb(#8a6c34)};
-    --warning-8: #{-rgb(#a37b3a)};
-    --warning-9: #{-rgb(#c19041)};
-    --warning-10: #{-rgb(#d5a048)};
-    --warning-11: #{-rgb(#eab14f)};
-
-    --gray-0: #{-rgb(#14161a)};
-    --gray-1: #{-rgb(#1b1d21)};
-    --gray-2: #{-rgb(#22252b)};
-    --gray-3: #{-rgb(#2a2d33)};
-    --gray-4: #{-rgb(#333b3d)};
-    --gray-5: #{-rgb(#3d464a)};
-    --gray-6: #{-rgb(#475055)};
-    --gray-7: #{-rgb(#515d60)};
-    --gray-8: #{-rgb(#5c696b)};
-    --gray-9: #{-rgb(#677577)};
-    --gray-10: #{-rgb(#738180)};
-    --gray-11: #{-rgb(#7f8c8c)};
+    --gray-0: oklch(16% 0.01 270);
+    --gray-1: oklch(19% 0.012 270);
+    --gray-2: oklch(23% 0.015 270);
+    --gray-3: oklch(27% 0.017 270);
+    --gray-4: oklch(35% 0.02 270);
+    --gray-5: oklch(43% 0.03 270);
+    --gray-6: oklch(51% 0.035 270);
+    --gray-7: oklch(63% 0.04 270);
+    --gray-8: oklch(75% 0.04 270);
+    --gray-9: oklch(83% 0.028 270);
+    --gray-10: oklch(91% 0.028 270);
+    --gray-11: oklch(99% 0.028 270);
+
+    --primary-0: oklch(26.8% 0.012 264);
+    --primary-1: oklch(29.3% 0.025 264);
+    --primary-2: oklch(32.4% 0.038 264);
+    --primary-3: oklch(36.4% 0.052 264);
+    --primary-4: oklch(40.6% 0.068 264);
+    --primary-5: oklch(45.3% 0.085 264);
+    --primary-6: oklch(49.8% 0.102 264);
+    --primary-7: oklch(54.9% 0.118 264);
+    --primary-8: oklch(60.9% 0.134 264);
+    --primary-9: oklch(68.5% 0.148 264);
+    --primary-10: oklch(73.9% 0.158 264);
+    --primary-11: oklch(79.5% 0.165 264);
+
+    --danger-0: oklch(26.1% 0.007 346);
+    --danger-1: oklch(29.3% 0.025 4);
+    --danger-2: oklch(32.4% 0.038 8);
+    --danger-3: oklch(36.4% 0.052 12);
+    --danger-4: oklch(40.6% 0.068 15);
+    --danger-5: oklch(45.3% 0.085 17);
+    --danger-6: oklch(49.8% 0.102 18);
+    --danger-7: oklch(54.9% 0.118 19);
+    --danger-8: oklch(60.9% 0.134 18);
+    --danger-9: oklch(68.5% 0.148 16);
+    --danger-10: oklch(73.9% 0.158 14);
+    --danger-11: oklch(79.5% 0.165 12);
+
+    --info-0: oklch(26.8% 0.012 264);
+    --info-1: oklch(29.3% 0.025 260);
+    --info-2: oklch(32.4% 0.038 258);
+    --info-3: oklch(36.4% 0.052 256);
+    --info-4: oklch(40.6% 0.068 254);
+    --info-5: oklch(45.3% 0.085 253);
+    --info-6: oklch(49.8% 0.102 252);
+    --info-7: oklch(54.9% 0.118 252);
+    --info-8: oklch(60.9% 0.134 253);
+    --info-9: oklch(68.5% 0.148 254);
+    --info-10: oklch(73.9% 0.158 254);
+    --info-11: oklch(79.5% 0.165 254);
+
+    --success-0: oklch(25.8% 0.017 156);
+    --success-1: oklch(29.3% 0.025 155);
+    --success-2: oklch(32.4% 0.038 155);
+    --success-3: oklch(36.4% 0.052 155);
+    --success-4: oklch(40.6% 0.068 154);
+    --success-5: oklch(45.3% 0.085 153);
+    --success-6: oklch(49.8% 0.102 152);
+    --success-7: oklch(54.9% 0.118 151);
+    --success-8: oklch(60.9% 0.134 150);
+    --success-9: oklch(68.5% 0.148 149);
+    --success-10: oklch(73.9% 0.158 148);
+    --success-11: oklch(79.5% 0.165 147);
+
+    --warning-0: oklch(27% 0.022 88);
+    --warning-1: oklch(29.3% 0.029 87);
+    --warning-2: oklch(32.4% 0.036 86);
+    --warning-3: oklch(36.4% 0.046 85);
+    --warning-4: oklch(40.6% 0.054 84);
+    --warning-5: oklch(45.3% 0.064 82);
+    --warning-6: oklch(49.8% 0.072 80);
+    --warning-7: oklch(54.9% 0.083 78);
+    --warning-8: oklch(60.9% 0.096 76);
+    --warning-9: oklch(68.5% 0.112 75);
+    --warning-10: oklch(73.9% 0.122 74);
+    --warning-11: oklch(79.5% 0.132 73);
 }
 
-@mixin default-light {
+@mixin defaults {
     --font-monospace: jetbrains-mono, monospace;
     --font-sans: inter-variable, sans-serif;
     --font-serif: serif;
     --font-size: 15px;
     --radius: 9px;
 
-    --background: rgb(var(--gray-2));
+    --background: var(--gray-2);
+    --foreground: var(--gray-8);
+    --foreground-prominent: var(--gray-10);
+    --foreground-secondary: var(--gray-5);
 
-    --foreground: rgb(var(--gray-8));
-    --foreground-prominent: rgb(var(--gray-10));
-    --foreground-secondary: rgb(var(--gray-5));
+    --overlay: oklch(from var(--gray-11) l c h / .6);
+    --overlay-secondary: oklch(from var(--gray-11) l c h / .4);
 }
 
-@mixin default-dark {
-    --background: rgb(var(--gray-2));
-
-    --foreground: #cbd5e1;
-    --foreground-prominent: #ffffff;
-    --foreground-secondary: #64748b;
+@mixin defaults-dark {
+    --overlay: rgb(0 0 0 / .6);
+    --overlay-secondary: rgb(0 0 0 / .4);
 }
 
 @mixin shadow-light {
-    --shadow-px: 0 1px 1px rgb(29 41 61 / .025);
-    --shadow-xs: 0 1px 2px 0 rgb(29 41 61 / .025);
-    --shadow-sm: 0 1px 3px rgb(29 41 61 / .05), 0 1px 2px -1px rgb(29 41 61 / .05);
-    --shadow-md: 0 4px 6px -1px rgb(29 41 61 / .05), 0 2px 4px -2px rgb(29 41 61 / .05);
-    --shadow-lg: 0 10px 15px -3px rgb(29 41 61 / .05), 0 4px 6px -4px rgb(29 41 61 / .05);
-    --shadow-xl: 0 20px 25px -5px rgb(29 41 61 / .05), 0 8px 10px -6px rgb(29 41 61 / .05);
-    --shadow-2xl: 0 25px 50px -12px rgb(29 41 61 / .125);
+    --shadow-px: 0 1px 1px oklch(from var(--gray-9) l c h / 0.02);
+    --shadow-xs: 0 1px 2px 0 oklch(from var(--gray-9) l c h / 0.02);
+    --shadow-sm: 0 1px 3px oklch(from var(--gray-9) l c h / 0.05), 0 1px 2px -1px oklch(from var(--gray-9) l c h / 0.05);
+    --shadow-md: 0 4px 6px -1px oklch(from var(--gray-9) l c h / 0.05), 0 2px 4px -2px oklch(from var(--gray-9) l c h / 0.05);
+    --shadow-lg: 0 10px 15px -3px oklch(from var(--gray-9) l c h / 0.05), 0 4px 6px -4px oklch(from var(--gray-9) l c h / 0.05);
+    --shadow-xl: 0 20px 25px -5px oklch(from var(--gray-9) l c h / 0.05), 0 8px 10px -6px oklch(from var(--gray-9) l c h / 0.05);
+    --shadow-2xl: 0 25px 50px -12px oklch(from var(--gray-9) l c h / 0.12);
 }
 
 @mixin shadow-dark {
-    --shadow-px: 0 1px 1px rgb(0 0 0 / .05);
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
-    --shadow-sm: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
+    --shadow-px: 0 1px 1px oklch(0 0 0 / 0.1);
+    --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.1);
+    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15);
+    --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.15), 0 2px 4px -2px oklch(0 0 0 / 0.15);
+    --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.15), 0 4px 6px -4px oklch(0 0 0 / 0.15);
+    --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.15), 0 8px 10px -6px oklch(0 0 0 / 0.15);
+    --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
 }

package/src/data/di.ts

@@ -7,6 +7,7 @@ export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol(
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
+export const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection> = Symbol();
 
 export type FluxExpandableGroupInjection = {
     closeAll(): void;
@@ -40,3 +41,7 @@ export type FluxTableInjection = {
     readonly isSeparated: boolean;
     readonly isStriped: boolean;
 };
+
+export type FluxTooltipInjection = {
+    calculate(): void;
+};

package/src/data/i18n.ts

@@ -18,7 +18,7 @@ export const english = {
     'flux.preview': 'Preview',
     'flux.previewClose': 'Close preview',
     'flux.displayingOf': '{from}–{to} of {total}',
-    'flux.rowsPerPage': 'Rows per page',
+    'flux.showN': 'Show {n}',
     'flux.next': 'Next',
     'flux.noItems': 'There are no items (left).',
     'flux.pagination': 'Pagination',

package/src/data/iconRegistry.ts

@@ -10,7 +10,7 @@ export let iconRegistry: IconRegistry = {};
 export function fluxRegisterIcons(icons: Icons): void {
     iconRegistry = Object.keys(icons).reduce((acc: IconRegistry, key: string) => {
         const {icon, iconName} = icons[key];
-        acc[iconName] = icon;
+        acc[iconName as FluxIconName] = icon;
 
         if (Array.isArray(icon[2])) {
             icon[2].forEach((iconName: string) => acc[iconName as FluxIconName] = icon);

package/src/data/store.ts

@@ -20,7 +20,7 @@ export type FluxStore = FluxState & {
     addPrompt(spec: Omit<FluxPromptObject, 'id'>): number;
     addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number;
     addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number;
-    registerDialog(): VoidFunction;
+    registerDialog(): [number, VoidFunction];
     removeAlert(id: number): void;
     removeConfirm(id: number): void;
     removePrompt(id: number): void;
@@ -104,9 +104,11 @@ export function addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number {
     return id;
 }
 
-export function registerDialog(): VoidFunction {
-    ++state.dialogCount;
-    return () => --state.dialogCount;
+export function registerDialog(): [number, VoidFunction] {
+    return [
+        ++state.dialogCount,
+        () => --state.dialogCount
+    ];
 }
 
 export function removeAlert(id: number): void {

package/src/index.ts

@@ -20,6 +20,7 @@ export type {
     FluxFilterInjection,
     FluxFlyoutInjection,
     FluxFormFieldInjection,
+    FluxTooltipInjection,
     FluxState,
     FluxStore
 } from './data';

package/src/util/createDialogRenderer.ts

@@ -1,7 +1,8 @@
-import { flattenVNodeTree } from '@flux-ui/internals';
-import { Component, getCurrentInstance, RenderFunction, Slots } from 'vue';
-import { Comment, h, onMounted, onUnmounted, SetupContext, Teleport, VNode } from 'vue';
+import { flattenVNodeTree, useFocusTrap } from '@flux-ui/internals';
+import type { Component, RenderFunction, SetupContext, Slots, VNode } from 'vue';
+import { Comment, h, onUnmounted, ref, Teleport, watch } from 'vue';
 import { registerDialog, useFluxStore } from '$flux/data';
+import $style from '$flux/css/component/Overlay.module.scss';
 
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
@@ -9,27 +10,38 @@ type Props = {
     readonly viewKey?: string;
 };
 
+const TARGET_SELECTOR = `.${$style.overlayProvider.replaceAll(' ', '.')}`;
+
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction {
-    const instance = getCurrentInstance();
     let unregister: Function | null = null;
     let zIndex = 0;
 
-    onMounted(() => {
-        window.addEventListener('keydown', onKeyDown);
-    });
+    const dialogRef = ref<HTMLElement>();
+
+    useFocusTrap(dialogRef);
 
     onUnmounted(() => {
-        window.removeEventListener('keydown', onKeyDown);
         unregister?.();
     });
 
+    watch(dialogRef, (dialog, _, onCleanup) => {
+        if (!dialog) {
+            return;
+        }
+
+        dialog.addEventListener('keydown', onKeyDown, {passive: true});
+        dialog.focus();
+
+        onCleanup(() => {
+            dialog.removeEventListener('keydown', onKeyDown);
+        });
+    });
+
     function onKeyDown(evt: KeyboardEvent): void {
         if (evt.key !== 'Escape' || !unregister || !props.isCloseable) {
             return;
         }
 
-        evt.preventDefault();
-        evt.stopPropagation();
         emit('close');
     }
 
@@ -38,25 +50,28 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
 
         const children = flattenVNodeTree(slots.default?.() ?? []);
         const isVisible = children.length > 0 && children.some(child => child.type !== Comment);
-        const content: VNode[] = [];
+        let content: VNode | undefined;
 
         if (isVisible) {
             if (!unregister) {
-                unregister = registerDialog();
-                zIndex = dialogCount + 1000;
+                [zIndex, unregister] = registerDialog();
             }
 
-            content.push(h('div', {
+            content = h('div', {
                 key: props.viewKey,
-                class: className,
-                style: {zIndex}
-            }, children));
+                ref: dialogRef,
+                class: [className, zIndex === dialogCount && $style.isCurrent],
+                style: {
+                    zIndex: zIndex + 1000
+                },
+                tabindex: 0
+            }, children);
         } else {
             unregister?.();
             unregister = null;
         }
 
-        return h(Teleport, {disabled: content.length === 0, to: instance?.appContext.app._container}, [
+        return h(Teleport, {defer: true, disabled: !content, to: TARGET_SELECTOR}, [
             h(transition, attrs, {
                 default: () => content
             })