@flux-ui/components 3.0.0-next.12 → 3.0.0-next.14

package/dist/util/createDialogRenderer.d.ts

@@ -1,4 +1,4 @@
-import { Component, RenderFunction, Slots, SetupContext } from 'vue';
+import { Component, RenderFunction, SetupContext, Slots } from 'vue';
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
     readonly isCloseable?: boolean;

package/dist/util/createDialogRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDialogRenderer.d.ts","sourceRoot":"","sources":["../../src/util/createDialogRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAsB,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAsC,YAAY,EAAmB,MAAM,KAAK,CAAC;AAGxF,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG;IACT,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,CAqDxI"}
+{"version":3,"file":"createDialogRenderer.d.ts","sourceRoot":"","sources":["../../src/util/createDialogRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAS,MAAM,KAAK,CAAC;AAIjF,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG;IACT,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,CAiExI"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.12",
+    "version": "3.0.0-next.14",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,26 +51,26 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^2.4.1",
-        "@flux-ui/internals": "3.0.0-next.12",
-        "@flux-ui/types": "3.0.0-next.12",
-        "@fortawesome/fontawesome-common-types": "^6.7.2",
+        "@basmilius/utils": "^2.5.2",
+        "@flux-ui/internals": "3.0.0-next.14",
+        "@flux-ui/types": "3.0.0-next.14",
+        "@fortawesome/fontawesome-common-types": "^7.0.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
         "lodash-es": "^4.17.21",
-        "luxon": "^3.6.1",
-        "vue": "^3.5.17"
+        "luxon": "^3.7.1",
+        "vue": "^3.5.18"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.4.1",
+        "@basmilius/vite-preset": "^2.5.2",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.6.2",
-        "@types/node": "^24.0.7",
+        "@types/node": "^24.1.0",
         "@vitejs/plugin-vue": "^6.0.0",
         "pinia": "^3.0.3",
         "sass-embedded": "^1.89.2",
         "typescript": "^5.8.3",
-        "vite": "^7.0.0",
-        "vue-tsc": "^2.2.10"
+        "vite": "^7.0.5",
+        "vue-tsc": "^3.0.3"
     }
 }

package/src/component/FluxDatePicker.vue

@@ -131,7 +131,7 @@
     import { useCalendar, useCalendarMonthSwitcher, useCalendarYearSwitcher } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
-    import { computed, ref, unref, useId } from 'vue';
+    import { computed, ref, unref, useId, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { FluxFadeTransition, FluxVerticalWindowTransition, FluxWindowTransition } from '$flux/transition';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
@@ -198,6 +198,10 @@
         }
     });
 
+    watch(modelValue, () => {
+        setViewDate(getInitialDate());
+    });
+
     function getInitialDate(): DateTime {
         const value = unref(modelValue);
         let date: DateTime;

package/src/component/FluxTooltipProvider.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { computed, defineComponent, h, ref, unref, watch } from 'vue';
-    import { useFluxStore } from '$flux/data';
+    import { computed, defineComponent, h, provide, ref, unref, watch } from 'vue';
+    import { FluxTooltipInjectionKey, useFluxStore } from '$flux/data';
     import { FluxTooltipTransition } from '$flux/transition';
     import $style from '$flux/css/component/Tooltip.module.scss';
 
@@ -60,7 +60,11 @@
             }
         }
 
-        watch(content, () => requestAnimationFrame(() => calculate()));
+        provide(FluxTooltipInjectionKey, {
+            calculate
+        });
+
+        watch(content, () => requestAnimationFrame(calculate));
 
         return () => h(FluxTooltipTransition, {}, {
             default: () => {

package/src/composable/index.ts

@@ -7,3 +7,4 @@ export { default as useFilterInjection } from './useFilterInjection';
 export { default as useFlyoutInjection } from './useFlyoutInjection';
 export { default as useFormFieldInjection } from './useFormFieldInjection';
 export { default as useTableInjection } from './useTableInjection';
+export { default as useTooltipInjection } from './useTooltipInjection';

package/src/composable/useTooltipInjection.ts

@@ -0,0 +1,8 @@
+import { inject } from 'vue';
+import { FluxTooltipInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxTooltipInjectionKey, {
+        calculate: () => void 0
+    });
+}

package/src/css/base.scss

@@ -12,6 +12,7 @@
     }
 
     [dark] {
+        @include variables.defaults-dark;
         @include variables.color-dark;
         @include variables.shadow-dark;
     }

package/src/css/component/Divider.module.scss

@@ -59,11 +59,11 @@
 .dividerLine {
     height: 1px;
     content: '';
-    background: var(--gray-1);
+    background: var(--gray-2);
 }
 
 .separator {
-    background: var(--gray-1);
+    background: var(--gray-2);
 }
 
 .separatorHorizontal {

package/src/css/component/DropZone.module.scss

@@ -6,8 +6,6 @@
     --dz-height: calc(100% + 2px);
     --dz-width: calc(100% + 2px);
 
-    position: relative;
-
     &:has(.dropZoneContent > .avatar) {
         --dz-inset: -3px;
         --dz-radius: 999px;
@@ -22,6 +20,7 @@
 }
 
 .dropZone {
+    position: relative;
     display: grid;
     align-items: center;
     gap: 15px 30px;
@@ -59,6 +58,8 @@
 }
 
 .dropZoneContent {
+    position: relative;
+
     > :local(.avatar) {
         display: block;
     }

package/src/css/component/Icon.module.scss

@@ -4,6 +4,7 @@
     flex-shrink: 0;
     font-size: 20px;
     line-height: 1;
+    overflow: visible;
 }
 
 .fontAwesomeIcon {

package/src/css/component/Menu.module.scss

@@ -50,11 +50,11 @@
     text-align: left;
 
     @include mixin.hover {
-        background: var(--gray-1);
+        background: var(--gray-2);
     }
 
     &:active {
-        background: var(--gray-2);
+        background: var(--gray-3);
     }
 }
 

package/src/css/component/Overlay.module.scss

@@ -4,8 +4,9 @@
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: oklch(from var(--gray-11) l c h / .6);
+    background: var(--overlay);
     backdrop-filter: blur(3px) saturate(180%);
+    outline: 0;
     z-index: 10000;
 
     > .basePaneStructure {
@@ -25,10 +26,6 @@
     }
 }
 
-[dark] .overlay {
-    background: rgb(0 0 0 / .6);
-}
-
 .overlaySmall {
     composes: overlay;
 
@@ -151,3 +148,34 @@
         transform: translate3d(100%, 0, 0);
     }
 }
+
+.overlay + .overlay {
+    background: transparent;
+    backdrop-filter: none;
+}
+
+.overlay > .basePaneStructure::after {
+    position: absolute;
+    display: block;
+    inset: 0;
+    content: '';
+    background: var(--overlay-secondary);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 420ms var(--swift-out);
+    z-index: 1;
+}
+
+.overlay:has(+ .overlay) > .basePaneStructure {
+    transition: 420ms var(--swift-out);
+    transition-property: filter, scale;
+}
+
+.overlay:has(+ .overlay:not(.overlayTransitionLeaveActive)) > .pane {
+    filter: blur(3px);
+    scale: .95;
+
+    &::after {
+        opacity: 1;
+    }
+}

package/src/css/component/Pane.module.scss

@@ -75,8 +75,8 @@
     display: flex;
     padding: 21px;
     gap: 9px;
-    background: var(--gray-0);
-    border-top: 1px solid var(--gray-1);
+    background: var(--gray-1);
+    border-top: 1px solid var(--gray-2);
 }
 
 .paneLoader {

package/src/css/component/Spinner.module.scss

@@ -1,5 +1,5 @@
 .spinner {
-    --track: var(--gray-2);
+    --track: var(--gray-1);
     --value: var(--primary-7);
 
     display: inline-block;

package/src/css/component/Tab.module.scss

@@ -8,7 +8,7 @@
     --tab-padding: 12px;
 
     position: relative;
-    box-shadow: inset 0 -2px var(--gray-1);
+    box-shadow: inset 0 -2px var(--gray-2);
     z-index: 0;
 }
 

package/src/css/component/Table.module.scss

@@ -41,7 +41,7 @@
 .tableCell {
     height: 0;
     padding: 0;
-    border: 0 solid var(--gray-1);
+    border: 0 solid var(--gray-2);
 
     @-moz-document url-prefix() {
         height: 100%;
@@ -58,7 +58,7 @@
 .tableHeader {
     composes: tableCell;
 
-    border-bottom: 2px solid var(--gray-1);
+    border-bottom: 2px solid var(--gray-2);
     color: var(--foreground-prominent);
 
     &.isShrinking {
@@ -81,13 +81,13 @@
 }
 
 tbody .tableRow:nth-child(even) .tableCell.isStriped {
-    background: oklch(from var(--gray-1) l c h / .25);
+    background: oklch(from var(--gray-1) l c h / .5);
 }
 
 @media (hover: hover) {
     tbody .tableRow:hover .tableCell.isHoverable,
     tbody .tableRow:has(:focus-visible) .tableCell.isHoverable {
-        background: oklch(from var(--gray-1) l c h / .5);
+        background: var(--gray-1);
     }
 }
 

package/src/css/component/Tooltip.module.scss

@@ -10,6 +10,7 @@
     backdrop-filter: blur(6px) saturate(180%);
     border-radius: var(--radius);
     color: var(--gray-0);
+    font-size: 14px;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
     translate: calc(var(--x) * 1px) calc(var(--y) * 1px);

package/src/css/variables.scss

@@ -9,10 +9,10 @@
 
 @mixin color-light {
     --gray-0: oklch(100% 0 270);
-    --gray-1: oklch(96% 0.012 270);
-    --gray-2: oklch(92% 0.015 270);
-    --gray-3: oklch(88% 0.017 270);
-    --gray-4: oklch(80% 0.02 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);
@@ -88,83 +88,83 @@
 }
 
 @mixin color-dark {
-    --gray-0: oklch(16% 0.01 240);
-    --gray-1: oklch(19% 0.012 240);
-    --gray-2: oklch(23% 0.015 240);
-    --gray-3: oklch(27% 0.017 240);
-    --gray-4: oklch(35% 0.02 240);
-    --gray-5: oklch(43% 0.03 240);
-    --gray-6: oklch(51% 0.035 240);
-    --gray-7: oklch(63% 0.04 240);
-    --gray-8: oklch(75% 0.04 240);
-    --gray-9: oklch(83% 0.028 240);
-    --gray-10: oklch(91% 0.028 240);
-    --gray-11: oklch(99% 0.028 240);
-
-    --primary-0: oklch(16% 0 264);
-    --primary-1: oklch(19% 0.02 264);
-    --primary-2: oklch(23% 0.04 264);
-    --primary-3: oklch(27% 0.06 264);
-    --primary-4: oklch(35% 0.10 264);
-    --primary-5: oklch(43% 0.14 264);
-    --primary-6: oklch(51% 0.18 264);
-    --primary-7: oklch(63% 0.22 264);
-    --primary-8: oklch(75% 0.20 264);
-    --primary-9: oklch(83% 0.18 264);
-    --primary-10: oklch(91% 0.14 264);
-    --primary-11: oklch(99% 0.10 264);
+    --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(26.4% 0.034 4);
-    --danger-2: oklch(28.5% 0.049 2);
-    --danger-3: oklch(31.5% 0.065 3);
-    --danger-4: oklch(34.8% 0.079 4);
-    --danger-5: oklch(38.4% 0.092 4);
-    --danger-6: oklch(42% 0.106 3);
-    --danger-7: oklch(45.8% 0.12 2);
-    --danger-8: oklch(49.9% 0.137 0);
-    --danger-9: oklch(51.9% 0.146 354);
-    --danger-10: oklch(55.1% 0.167 352);
-    --danger-11: oklch(58.8% 0.187 350);
+    --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(27.3% 0.023 251);
-    --info-2: oklch(30.9% 0.034 254);
-    --info-3: oklch(35.3% 0.044 252);
-    --info-4: oklch(40% 0.058 250);
-    --info-5: oklch(44.4% 0.073 252);
-    --info-6: oklch(49% 0.084 252);
-    --info-7: oklch(53.4% 0.096 254);
-    --info-8: oklch(57.6% 0.107 255);
-    --info-9: oklch(62.1% 0.116 256);
-    --info-10: oklch(66.3% 0.125 258);
-    --info-11: oklch(71% 0.132 257);
+    --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(28.4% 0.02 157);
-    --success-2: oklch(31% 0.024 160);
-    --success-3: oklch(36.2% 0.04 156);
-    --success-4: oklch(41.3% 0.054 154);
-    --success-5: oklch(46.6% 0.069 153);
-    --success-6: oklch(51.8% 0.082 152);
-    --success-7: oklch(57.1% 0.091 152);
-    --success-8: oklch(62.6% 0.101 150);
-    --success-9: oklch(68.7% 0.104 147);
-    --success-10: oklch(73.9% 0.092 145);
-    --success-11: oklch(78.9% 0.079 145);
+    --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 84);
-    --warning-2: oklch(32.4% 0.036 82);
-    --warning-3: oklch(36.4% 0.046 83);
-    --warning-4: oklch(40.6% 0.054 90);
-    --warning-5: oklch(45.3% 0.064 92);
-    --warning-6: oklch(49.8% 0.072 87);
-    --warning-7: oklch(54.9% 0.083 81);
-    --warning-8: oklch(60.9% 0.096 77);
-    --warning-9: oklch(68.5% 0.112 77);
-    --warning-10: oklch(73.9% 0.122 77);
-    --warning-11: oklch(79.5% 0.132 78);
+    --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 defaults {
@@ -178,6 +178,14 @@
     --foreground: var(--gray-8);
     --foreground-prominent: var(--gray-10);
     --foreground-secondary: 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 defaults-dark {
+    --overlay: rgb(0 0 0 / .6);
+    --overlay-secondary: rgb(0 0 0 / .4);
 }
 
 @mixin shadow-light {

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/index.ts

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

package/src/util/createDialogRenderer.ts

@@ -1,6 +1,6 @@
-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, getCurrentInstance, h, onUnmounted, ref, Teleport, watch } from 'vue';
 import { registerDialog, useFluxStore } from '$flux/data';
 
 type Emit = SetupContext<['close']>['emit'];
@@ -14,22 +14,32 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
     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,7 +48,7 @@ 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) {
@@ -46,17 +56,19 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
                 zIndex = dialogCount + 1000;
             }
 
-            content.push(h('div', {
+            content = h('div', {
                 key: props.viewKey,
+                ref: dialogRef,
                 class: className,
-                style: {zIndex}
-            }, children));
+                style: {zIndex},
+                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: instance?.appContext.app._container}, [
             h(transition, attrs, {
                 default: () => content
             })