vuetify 3.10.2 → 3.10.4

package/lib/components/VDatePicker/VDatePicker.d.ts

@@ -399,7 +399,7 @@ export declare const makeVDatePickerProps: <Defaults extends {
 };
 export declare const VDatePicker: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         tile: boolean;
         tag: string | import("../../util/index.js").JSXComponent;
         divided: boolean;
@@ -551,7 +551,7 @@ export declare const VDatePicker: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         tile: boolean;
         tag: string | import("../../util/index.js").JSXComponent;
         divided: boolean;
@@ -637,7 +637,7 @@ export declare const VDatePicker: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     tile: boolean;
     tag: string | import("../../util/index.js").JSXComponent;
     divided: boolean;

package/lib/components/VDialog/VDialog.d.ts

@@ -853,7 +853,7 @@ export declare const makeVDialogProps: <Defaults extends {
 };
 export declare const VDialog: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -1030,7 +1030,7 @@ export declare const VDialog: {
         }> & Omit<{
             theme?: string | undefined;
             class?: any;
-            style: import("vue").StyleValue;
+            style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
             $children?: {
                 default?: ((arg: {
                     isActive: import("vue").Ref<boolean, boolean>;
@@ -1134,7 +1134,7 @@ export declare const VDialog: {
         $emit: ((event: "afterEnter") => void) & ((event: "afterLeave") => void) & ((event: "click:outside", e: MouseEvent) => void) & ((event: "keydown", e: KeyboardEvent) => void) & ((event: "update:modelValue", value: boolean) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<{
-            style: import("vue").StyleValue;
+            style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
             locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -1312,7 +1312,7 @@ export declare const VDialog: {
         zIndex: string | number;
         _disableGlobalStack: boolean;
     }> & Omit<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -1533,7 +1533,7 @@ export declare const VDialog: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -1710,7 +1710,7 @@ export declare const VDialog: {
         }> & Omit<{
             theme?: string | undefined;
             class?: any;
-            style: import("vue").StyleValue;
+            style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
             $children?: {
                 default?: ((arg: {
                     isActive: import("vue").Ref<boolean, boolean>;
@@ -1814,7 +1814,7 @@ export declare const VDialog: {
         $emit: ((event: "afterEnter") => void) & ((event: "afterLeave") => void) & ((event: "click:outside", e: MouseEvent) => void) & ((event: "keydown", e: KeyboardEvent) => void) & ((event: "update:modelValue", value: boolean) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<{
-            style: import("vue").StyleValue;
+            style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
             locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -1992,7 +1992,7 @@ export declare const VDialog: {
         zIndex: string | number;
         _disableGlobalStack: boolean;
     }> & Omit<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -2193,7 +2193,7 @@ export declare const VDialog: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
     location: import("../../util/index.js").Anchor;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -2370,7 +2370,7 @@ export declare const VDialog: {
     }> & Omit<{
         theme?: string | undefined;
         class?: any;
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         $children?: {
             default?: ((arg: {
                 isActive: import("vue").Ref<boolean, boolean>;
@@ -2474,7 +2474,7 @@ export declare const VDialog: {
     $emit: ((event: "afterEnter") => void) & ((event: "afterLeave") => void) & ((event: "click:outside", e: MouseEvent) => void) & ((event: "keydown", e: KeyboardEvent) => void) & ((event: "update:modelValue", value: boolean) => void);
     $el: any;
     $options: import("vue").ComponentOptionsBase<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
@@ -2652,7 +2652,7 @@ export declare const VDialog: {
     zIndex: string | number;
     _disableGlobalStack: boolean;
 }> & Omit<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     locationStrategy: "connected" | "static" | import("../../types.js").LocationStrategyFunction;
     location: import("../../util/index.js").Anchor;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;

package/lib/components/VDialog/VDialog.js

@@ -46,10 +46,11 @@ export const VDialog = genericComponent()({
       scopeId
     } = useScopeId();
     const overlay = ref();
-    function onFocusin(e) {
+    async function onFocusin(e) {
       const before = e.relatedTarget;
       const after = e.target;
-      if (before !== after && overlay.value?.contentEl &&
+      await nextTick();
+      if (isActive.value && before !== after && overlay.value?.contentEl &&
       // We're the topmost dialog
       overlay.value?.globalTop &&
       // It isn't the document or the dialog body
@@ -57,22 +58,39 @@ export const VDialog = genericComponent()({
       // It isn't inside the dialog body
       !overlay.value.contentEl.contains(after)) {
         const focusable = focusableChildren(overlay.value.contentEl);
-        if (!focusable.length) return;
-        const firstElement = focusable[0];
-        const lastElement = focusable[focusable.length - 1];
-        if (before === firstElement) {
-          lastElement.focus();
-        } else {
-          firstElement.focus();
-        }
+        focusable[0]?.focus();
+      }
+    }
+    function onKeydown(e) {
+      if (e.key !== 'Tab' || !overlay.value?.contentEl) return;
+      const focusable = focusableChildren(overlay.value.contentEl);
+      if (!focusable.length) return;
+      const firstElement = focusable[0];
+      const lastElement = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && active === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
       }
     }
     onBeforeUnmount(() => {
       document.removeEventListener('focusin', onFocusin);
+      document.removeEventListener('keydown', onKeydown);
     });
     if (IN_BROWSER) {
       watch(() => isActive.value && props.retainFocus, val => {
-        val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
+        if (val) {
+          document.addEventListener('focusin', onFocusin, {
+            once: true
+          });
+          document.addEventListener('keydown', onKeydown);
+        } else {
+          document.removeEventListener('focusin', onFocusin);
+          document.removeEventListener('keydown', onKeydown);
+        }
       }, {
         immediate: true
       });

package/lib/components/VDialog/VDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDialog.js","names":["VDialogTransition","VDefaultsProvider","VOverlay","makeVOverlayProps","forwardRefs","useProxiedModel","useScopeId","mergeProps","nextTick","onBeforeUnmount","ref","watch","focusableChildren","genericComponent","IN_BROWSER","propsFactory","useRender","makeVDialogProps","fullscreen","Boolean","retainFocus","type","default","scrollable","origin","scrollStrategy","transition","component","zIndex","VDialog","name","props","emits","value","afterEnter","afterLeave","setup","_ref","emit","slots","isActive","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","length","firstElement","lastElement","focus","removeEventListener","val","addEventListener","immediate","onAfterEnter","scrim","activeElement","preventScroll","onAfterLeave","activatorEl","overlayProps","filterProps","activatorProps","contentProps","tabindex","_createVNode","_mergeProps","class","style","$event","height","undefined","width","maxHeight","maxWidth","activator","_len","arguments","args","Array","_key"],"sources":["../../../src/components/VDialog/VDialog.tsx"],"sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\nimport { makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { mergeProps, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const makeVDialogProps = propsFactory({\n  fullscreen: Boolean,\n  retainFocus: {\n    type: Boolean,\n    default: true,\n  },\n  scrollable: Boolean,\n\n  ...makeVOverlayProps({\n    origin: 'center center' as const,\n    scrollStrategy: 'block' as const,\n    transition: { component: VDialogTransition },\n    zIndex: 2400,\n  }),\n}, 'VDialog')\n\nexport const VDialog = genericComponent<OverlaySlots>()({\n  name: 'VDialog',\n\n  props: makeVDialogProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    afterEnter: () => true,\n    afterLeave: () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const overlay = ref<VOverlay>()\n    function onFocusin (e: FocusEvent) {\n      const before = e.relatedTarget as HTMLElement | null\n      const after = e.target as HTMLElement | null\n\n      if (\n        before !== after &&\n        overlay.value?.contentEl &&\n        // We're the topmost dialog\n        overlay.value?.globalTop &&\n        // It isn't the document or the dialog body\n        ![document, overlay.value.contentEl].includes(after!) &&\n        // It isn't inside the dialog body\n        !overlay.value.contentEl.contains(after)\n      ) {\n        const focusable = focusableChildren(overlay.value.contentEl)\n\n        if (!focusable.length) return\n\n        const firstElement = focusable[0]\n        const lastElement = focusable[focusable.length - 1]\n\n        if (before === firstElement) {\n          lastElement.focus()\n        } else {\n          firstElement.focus()\n        }\n      }\n    }\n\n    onBeforeUnmount(() => {\n      document.removeEventListener('focusin', onFocusin)\n    })\n\n    if (IN_BROWSER) {\n      watch(() => isActive.value && props.retainFocus, val => {\n        val\n          ? document.addEventListener('focusin', onFocusin)\n          : document.removeEventListener('focusin', onFocusin)\n      }, { immediate: true })\n    }\n\n    function onAfterEnter () {\n      emit('afterEnter')\n      if (\n        (props.scrim || props.retainFocus) &&\n        overlay.value?.contentEl &&\n        !overlay.value.contentEl.contains(document.activeElement)\n      ) {\n        overlay.value.contentEl.focus({ preventScroll: true })\n      }\n    }\n\n    function onAfterLeave () {\n      emit('afterLeave')\n    }\n\n    watch(isActive, async val => {\n      if (!val) {\n        await nextTick()\n        overlay.value!.activatorEl?.focus({ preventScroll: true })\n      }\n    })\n\n    useRender(() => {\n      const overlayProps = VOverlay.filterProps(props)\n      const activatorProps = mergeProps({\n        'aria-haspopup': 'dialog',\n      }, props.activatorProps)\n      const contentProps = mergeProps({\n        tabindex: -1,\n      }, props.contentProps)\n\n      return (\n        <VOverlay\n          ref={ overlay }\n          class={[\n            'v-dialog',\n            {\n              'v-dialog--fullscreen': props.fullscreen,\n              'v-dialog--scrollable': props.scrollable,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n          { ...overlayProps }\n          v-model={ isActive.value }\n          aria-modal=\"true\"\n          activatorProps={ activatorProps }\n          contentProps={ contentProps }\n          height={ !props.fullscreen ? props.height : undefined }\n          width={ !props.fullscreen ? props.width : undefined }\n          maxHeight={ !props.fullscreen ? props.maxHeight : undefined }\n          maxWidth={ !props.fullscreen ? props.maxWidth : undefined }\n          role=\"dialog\"\n          onAfterEnter={ onAfterEnter }\n          onAfterLeave={ onAfterLeave }\n          { ...scopeId }\n        >\n          {{\n            activator: slots.activator,\n            default: (...args) => (\n              <VDefaultsProvider root=\"VDialog\">\n                { slots.default?.(...args) }\n              </VDefaultsProvider>\n            ),\n          }}\n        </VOverlay>\n      )\n    })\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDialog.js","names":["VDialogTransition","VDefaultsProvider","VOverlay","makeVOverlayProps","forwardRefs","useProxiedModel","useScopeId","mergeProps","nextTick","onBeforeUnmount","ref","watch","focusableChildren","genericComponent","IN_BROWSER","propsFactory","useRender","makeVDialogProps","fullscreen","Boolean","retainFocus","type","default","scrollable","origin","scrollStrategy","transition","component","zIndex","VDialog","name","props","emits","value","afterEnter","afterLeave","setup","_ref","emit","slots","isActive","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","focus","onKeydown","key","length","firstElement","lastElement","active","activeElement","shiftKey","preventDefault","removeEventListener","val","addEventListener","once","immediate","onAfterEnter","scrim","preventScroll","onAfterLeave","activatorEl","overlayProps","filterProps","activatorProps","contentProps","tabindex","_createVNode","_mergeProps","class","style","$event","height","undefined","width","maxHeight","maxWidth","activator","_len","arguments","args","Array","_key"],"sources":["../../../src/components/VDialog/VDialog.tsx"],"sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\nimport { makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { mergeProps, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const makeVDialogProps = propsFactory({\n  fullscreen: Boolean,\n  retainFocus: {\n    type: Boolean,\n    default: true,\n  },\n  scrollable: Boolean,\n\n  ...makeVOverlayProps({\n    origin: 'center center' as const,\n    scrollStrategy: 'block' as const,\n    transition: { component: VDialogTransition },\n    zIndex: 2400,\n  }),\n}, 'VDialog')\n\nexport const VDialog = genericComponent<OverlaySlots>()({\n  name: 'VDialog',\n\n  props: makeVDialogProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    afterEnter: () => true,\n    afterLeave: () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const overlay = ref<VOverlay>()\n    async function onFocusin (e: FocusEvent) {\n      const before = e.relatedTarget as HTMLElement | null\n      const after = e.target as HTMLElement | null\n\n      await nextTick()\n\n      if (\n        isActive.value &&\n        before !== after &&\n        overlay.value?.contentEl &&\n        // We're the topmost dialog\n        overlay.value?.globalTop &&\n        // It isn't the document or the dialog body\n        ![document, overlay.value.contentEl].includes(after!) &&\n        // It isn't inside the dialog body\n        !overlay.value.contentEl.contains(after)\n      ) {\n        const focusable = focusableChildren(overlay.value.contentEl)\n        focusable[0]?.focus()\n      }\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key !== 'Tab' || !overlay.value?.contentEl) return\n\n      const focusable = focusableChildren(overlay.value.contentEl)\n      if (!focusable.length) return\n\n      const firstElement = focusable[0]\n      const lastElement = focusable[focusable.length - 1]\n      const active = document.activeElement as HTMLElement | null\n\n      if (e.shiftKey && active === firstElement) {\n        e.preventDefault()\n        lastElement.focus()\n      } else if (!e.shiftKey && active === lastElement) {\n        e.preventDefault()\n        firstElement.focus()\n      }\n    }\n\n    onBeforeUnmount(() => {\n      document.removeEventListener('focusin', onFocusin)\n      document.removeEventListener('keydown', onKeydown)\n    })\n\n    if (IN_BROWSER) {\n      watch(() => isActive.value && props.retainFocus, val => {\n        if (val) {\n          document.addEventListener('focusin', onFocusin, { once: true })\n          document.addEventListener('keydown', onKeydown)\n        } else {\n          document.removeEventListener('focusin', onFocusin)\n          document.removeEventListener('keydown', onKeydown)\n        }\n      }, { immediate: true })\n    }\n\n    function onAfterEnter () {\n      emit('afterEnter')\n      if (\n        (props.scrim || props.retainFocus) &&\n        overlay.value?.contentEl &&\n        !overlay.value.contentEl.contains(document.activeElement)\n      ) {\n        overlay.value.contentEl.focus({ preventScroll: true })\n      }\n    }\n\n    function onAfterLeave () {\n      emit('afterLeave')\n    }\n\n    watch(isActive, async val => {\n      if (!val) {\n        await nextTick()\n        overlay.value!.activatorEl?.focus({ preventScroll: true })\n      }\n    })\n\n    useRender(() => {\n      const overlayProps = VOverlay.filterProps(props)\n      const activatorProps = mergeProps({\n        'aria-haspopup': 'dialog',\n      }, props.activatorProps)\n      const contentProps = mergeProps({\n        tabindex: -1,\n      }, props.contentProps)\n\n      return (\n        <VOverlay\n          ref={ overlay }\n          class={[\n            'v-dialog',\n            {\n              'v-dialog--fullscreen': props.fullscreen,\n              'v-dialog--scrollable': props.scrollable,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n          { ...overlayProps }\n          v-model={ isActive.value }\n          aria-modal=\"true\"\n          activatorProps={ activatorProps }\n          contentProps={ contentProps }\n          height={ !props.fullscreen ? props.height : undefined }\n          width={ !props.fullscreen ? props.width : undefined }\n          maxHeight={ !props.fullscreen ? props.maxHeight : undefined }\n          maxWidth={ !props.fullscreen ? props.maxWidth : undefined }\n          role=\"dialog\"\n          onAfterEnter={ onAfterEnter }\n          onAfterLeave={ onAfterLeave }\n          { ...scopeId }\n        >\n          {{\n            activator: slots.activator,\n            default: (...args) => (\n              <VDefaultsProvider root=\"VDialog\">\n                { slots.default?.(...args) }\n              </VDefaultsProvider>\n            ),\n          }}\n        </VOverlay>\n      )\n    })\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDialog/__test__/VDialog.spec.browser.js

@@ -46,5 +46,46 @@ describe('VDialog', () => {
     await userEvent.click(element);
     await expect.poll(() => onAfterLeave).toHaveBeenCalledTimes(1);
   });
+  it('should focus on the last element when shift + tab key is pressed on the first element', async () => {
+    const model = ref(true);
+    render(() => _createElementVNode("div", null, [_createVNode(VDialog, {
+      "modelValue": model.value,
+      "onUpdate:modelValue": $event => model.value = $event,
+      "persistent": true
+    }, {
+      default: () => [_createElementVNode("div", null, [_createElementVNode("button", {
+        "data-testid": "first"
+      }, [_createTextVNode("First")]), _createElementVNode("button", {
+        "data-testid": "last"
+      }, [_createTextVNode("Last")])])]
+    })]));
+    const first = screen.getByCSS('button[data-testid="first"]');
+    const last = screen.getByCSS('button[data-testid="last"]');
+    first.focus();
+    await expect.poll(() => document.activeElement).toBe(first);
+    await userEvent.tab({
+      shift: true
+    });
+    await expect.poll(() => document.activeElement).toBe(last);
+  });
+  it('should focus on the first element when Tab key is pressed on the last element', async () => {
+    const model = ref(true);
+    render(() => _createElementVNode("div", null, [_createVNode(VDialog, {
+      "modelValue": model.value,
+      "onUpdate:modelValue": $event => model.value = $event
+    }, {
+      default: () => [_createElementVNode("div", null, [_createElementVNode("button", {
+        "data-testid": "first"
+      }, [_createTextVNode("First")]), _createElementVNode("button", {
+        "data-testid": "last"
+      }, [_createTextVNode("Last")])])]
+    })]));
+    const first = screen.getByCSS('button[data-testid="first"]');
+    const last = screen.getByCSS('button[data-testid="last"]');
+    last.focus();
+    await expect.poll(() => document.activeElement).toBe(last);
+    await userEvent.tab();
+    await expect.poll(() => document.activeElement).toBe(first);
+  });
 });
 //# sourceMappingURL=VDialog.spec.browser.js.map

package/lib/components/VDialog/__test__/VDialog.spec.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDialog.spec.browser.js","names":["VDialog","render","screen","userEvent","nextTick","ref","describe","it","model","element","_createElementVNode","_createVNode","value","$event","default","_createTextVNode","expect","queryByTestId","toBeNull","findByTestId","resolves","toBeVisible","click","poll","toBeFalsy","onAfterLeave","vi","fn","toHaveBeenCalledTimes"],"sources":["../../../../src/components/VDialog/__test__/VDialog.spec.browser.tsx"],"sourcesContent":["// Components\nimport { VDialog } from '../VDialog'\n\n// Utilities\nimport { render, screen, userEvent } from '@test'\nimport { nextTick, ref } from 'vue'\n\n// Tests\ndescribe('VDialog', () => {\n  it('should render correctly', async () => {\n    const model = ref(false)\n    const { element } = render(() => (\n      <div>\n        <VDialog v-model={ model.value } data-testid=\"dialog\">\n          <div data-testid=\"content\">Content</div>\n        </VDialog>\n      </div>\n    ))\n\n    expect(screen.queryByTestId('dialog')).toBeNull()\n\n    model.value = true\n    await nextTick()\n    await expect(screen.findByTestId('dialog')).resolves.toBeVisible()\n    await expect.element(await screen.findByTestId('content')).toBeVisible()\n\n    await userEvent.click(element)\n    await expect.poll(() => model.value).toBeFalsy()\n    await expect.poll(() => screen.queryByTestId('dialog')).toBeNull()\n    await expect.poll(() => screen.queryByTestId('content')).toBeNull()\n  })\n\n  it('should emit afterLeave', async () => {\n    const model = ref(true)\n    const onAfterLeave = vi.fn()\n    const { element } = render(() => (\n      <div>\n        <VDialog v-model={ model.value } onAfterLeave={ onAfterLeave }>\n          <div data-test=\"content\">Content</div>\n        </VDialog>\n      </div>\n    ))\n\n    await userEvent.click(element)\n    await expect.poll(() => onAfterLeave).toHaveBeenCalledTimes(1)\n  })\n})\n"],"mappings":";AAAA;AAAA,SACSA,OAAO,yBAEhB;AACA,SAASC,MAAM,EAAEC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AACjD,SAASC,QAAQ,EAAEC,GAAG,QAAQ,KAAK;;AAEnC;AACAC,QAAQ,CAAC,SAAS,EAAE,MAAM;EACxBC,EAAE,CAAC,yBAAyB,EAAE,YAAY;IACxC,MAAMC,KAAK,GAAGH,GAAG,CAAC,KAAK,CAAC;IACxB,MAAM;MAAEI;IAAQ,CAAC,GAAGR,MAAM,CAAC,MAAAS,mBAAA,eAAAC,YAAA,CAAAX,OAAA;MAAA,cAEJQ,KAAK,CAACI,KAAK;MAAA,uBAAAC,MAAA,IAAXL,KAAK,CAACI,KAAK,GAAAC,MAAA;MAAA;IAAA;MAAAC,OAAA,EAAAA,CAAA,MAAAJ,mBAAA;QAAA;MAAA,IAAAK,gBAAA;IAAA,IAIjC,CAAC;IAEFC,MAAM,CAACd,MAAM,CAACe,aAAa,CAAC,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;IAEjDV,KAAK,CAACI,KAAK,GAAG,IAAI;IAClB,MAAMR,QAAQ,CAAC,CAAC;IAChB,MAAMY,MAAM,CAACd,MAAM,CAACiB,YAAY,CAAC,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAACC,WAAW,CAAC,CAAC;IAClE,MAAML,MAAM,CAACP,OAAO,CAAC,MAAMP,MAAM,CAACiB,YAAY,CAAC,SAAS,CAAC,CAAC,CAACE,WAAW,CAAC,CAAC;IAExE,MAAMlB,SAAS,CAACmB,KAAK,CAACb,OAAO,CAAC;IAC9B,MAAMO,MAAM,CAACO,IAAI,CAAC,MAAMf,KAAK,CAACI,KAAK,CAAC,CAACY,SAAS,CAAC,CAAC;IAChD,MAAMR,MAAM,CAACO,IAAI,CAAC,MAAMrB,MAAM,CAACe,aAAa,CAAC,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;IAClE,MAAMF,MAAM,CAACO,IAAI,CAAC,MAAMrB,MAAM,CAACe,aAAa,CAAC,SAAS,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EACrE,CAAC,CAAC;EAEFX,EAAE,CAAC,wBAAwB,EAAE,YAAY;IACvC,MAAMC,KAAK,GAAGH,GAAG,CAAC,IAAI,CAAC;IACvB,MAAMoB,YAAY,GAAGC,EAAE,CAACC,EAAE,CAAC,CAAC;IAC5B,MAAM;MAAElB;IAAQ,CAAC,GAAGR,MAAM,CAAC,MAAAS,mBAAA,eAAAC,YAAA,CAAAX,OAAA;MAAA,cAEJQ,KAAK,CAACI,KAAK;MAAA,uBAAAC,MAAA,IAAXL,KAAK,CAACI,KAAK,GAAAC,MAAA;MAAA,gBAAkBY;IAAY;MAAAX,OAAA,EAAAA,CAAA,MAAAJ,mBAAA;QAAA;MAAA,IAAAK,gBAAA;IAAA,IAI/D,CAAC;IAEF,MAAMZ,SAAS,CAACmB,KAAK,CAACb,OAAO,CAAC;IAC9B,MAAMO,MAAM,CAACO,IAAI,CAAC,MAAME,YAAY,CAAC,CAACG,qBAAqB,CAAC,CAAC,CAAC;EAChE,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VDialog.spec.browser.js","names":["VDialog","render","screen","userEvent","nextTick","ref","describe","it","model","element","_createElementVNode","_createVNode","value","$event","default","_createTextVNode","expect","queryByTestId","toBeNull","findByTestId","resolves","toBeVisible","click","poll","toBeFalsy","onAfterLeave","vi","fn","toHaveBeenCalledTimes","first","getByCSS","last","focus","document","activeElement","toBe","tab","shift"],"sources":["../../../../src/components/VDialog/__test__/VDialog.spec.browser.tsx"],"sourcesContent":["// Components\nimport { VDialog } from '../VDialog'\n\n// Utilities\nimport { render, screen, userEvent } from '@test'\nimport { nextTick, ref } from 'vue'\n\n// Tests\ndescribe('VDialog', () => {\n  it('should render correctly', async () => {\n    const model = ref(false)\n    const { element } = render(() => (\n      <div>\n        <VDialog v-model={ model.value } data-testid=\"dialog\">\n          <div data-testid=\"content\">Content</div>\n        </VDialog>\n      </div>\n    ))\n\n    expect(screen.queryByTestId('dialog')).toBeNull()\n\n    model.value = true\n    await nextTick()\n    await expect(screen.findByTestId('dialog')).resolves.toBeVisible()\n    await expect.element(await screen.findByTestId('content')).toBeVisible()\n\n    await userEvent.click(element)\n    await expect.poll(() => model.value).toBeFalsy()\n    await expect.poll(() => screen.queryByTestId('dialog')).toBeNull()\n    await expect.poll(() => screen.queryByTestId('content')).toBeNull()\n  })\n\n  it('should emit afterLeave', async () => {\n    const model = ref(true)\n    const onAfterLeave = vi.fn()\n    const { element } = render(() => (\n      <div>\n        <VDialog v-model={ model.value } onAfterLeave={ onAfterLeave }>\n          <div data-test=\"content\">Content</div>\n        </VDialog>\n      </div>\n    ))\n\n    await userEvent.click(element)\n    await expect.poll(() => onAfterLeave).toHaveBeenCalledTimes(1)\n  })\n\n  it('should focus on the last element when shift + tab key is pressed on the first element', async () => {\n    const model = ref(true)\n    render(() => (\n      <div>\n        <VDialog v-model={ model.value } persistent>\n          <div>\n            <button data-testid=\"first\">First</button>\n            <button data-testid=\"last\">Last</button>\n          </div>\n        </VDialog>\n      </div>\n    ))\n    const first = screen.getByCSS('button[data-testid=\"first\"]')\n    const last = screen.getByCSS('button[data-testid=\"last\"]')\n\n    first.focus()\n    await expect.poll(() => document.activeElement).toBe(first)\n\n    await userEvent.tab({ shift: true })\n    await expect.poll(() => document.activeElement).toBe(last)\n  })\n\n  it('should focus on the first element when Tab key is pressed on the last element', async () => {\n    const model = ref(true)\n    render(() => (\n      <div>\n        <VDialog v-model={ model.value }>\n          <div>\n            <button data-testid=\"first\">First</button>\n            <button data-testid=\"last\">Last</button>\n          </div>\n        </VDialog>\n      </div>\n    ))\n    const first = screen.getByCSS('button[data-testid=\"first\"]')\n    const last = screen.getByCSS('button[data-testid=\"last\"]')\n\n    last.focus()\n    await expect.poll(() => document.activeElement).toBe(last)\n\n    await userEvent.tab()\n    await expect.poll(() => document.activeElement).toBe(first)\n  })\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDivider/VDivider.d.ts

@@ -56,7 +56,7 @@ export declare const makeVDividerProps: <Defaults extends {
 };
 export declare const VDivider: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         inset: boolean;
         vertical: boolean;
     } & {
@@ -93,7 +93,7 @@ export declare const VDivider: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         inset: boolean;
         vertical: boolean;
     } & {
@@ -123,7 +123,7 @@ export declare const VDivider: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     inset: boolean;
     vertical: boolean;
 } & {

package/lib/components/VEmptyState/VEmptyState.d.ts

@@ -161,8 +161,8 @@ export declare const makeVEmptyStateProps: <Defaults extends {
 };
 export declare const VEmptyState: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
-        size: string | number | undefined;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
+        size: string | number;
         justify: "center" | "end" | "start";
         textWidth: string | number;
     } & {
@@ -262,8 +262,8 @@ export declare const VEmptyState: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
-        size: string | number | undefined;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
+        size: string | number;
         justify: "center" | "end" | "start";
         textWidth: string | number;
     } & {
@@ -335,8 +335,8 @@ export declare const VEmptyState: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
-    size: string | number | undefined;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
+    size: string | number;
     justify: "center" | "end" | "start";
     textWidth: string | number;
 } & {

package/lib/components/VExpansionPanel/VExpansionPanel.d.ts

@@ -203,7 +203,7 @@ export type VExpansionPanelSlots = {
 };
 export declare const VExpansionPanel: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         tile: boolean;
         tag: string | import("../../util/index.js").JSXComponent;
         disabled: boolean;
@@ -216,7 +216,7 @@ export declare const VExpansionPanel: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         readonly: boolean;
     } & {
         class?: any;
@@ -296,7 +296,7 @@ export declare const VExpansionPanel: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         tile: boolean;
         tag: string | import("../../util/index.js").JSXComponent;
         disabled: boolean;
@@ -309,7 +309,7 @@ export declare const VExpansionPanel: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         readonly: boolean;
     } & {
         class?: any;
@@ -372,7 +372,7 @@ export declare const VExpansionPanel: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     tile: boolean;
     tag: string | import("../../util/index.js").JSXComponent;
     disabled: boolean;
@@ -385,7 +385,7 @@ export declare const VExpansionPanel: {
     ripple: boolean | {
         class?: string | undefined;
         keys?: string[] | undefined;
-    } | undefined;
+    };
     readonly: boolean;
 } & {
     class?: any;

package/lib/components/VExpansionPanel/VExpansionPanelText.d.ts

@@ -24,7 +24,7 @@ export declare const makeVExpansionPanelTextProps: <Defaults extends {
 };
 export declare const VExpansionPanelText: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         eager: boolean;
     } & {
         class?: any;
@@ -54,7 +54,7 @@ export declare const VExpansionPanelText: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         eager: boolean;
     } & {
         class?: any;
@@ -77,7 +77,7 @@ export declare const VExpansionPanelText: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     eager: boolean;
 } & {
     class?: any;

package/lib/components/VExpansionPanel/VExpansionPanelTitle.d.ts

@@ -139,7 +139,7 @@ export declare const makeVExpansionPanelTitleProps: <Defaults extends {
 };
 export declare const VExpansionPanelTitle: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         expandIcon: IconValue;
         collapseIcon: IconValue;
         hideActions: boolean;
@@ -148,7 +148,7 @@ export declare const VExpansionPanelTitle: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         readonly: boolean;
     } & {
         class?: any;
@@ -200,7 +200,7 @@ export declare const VExpansionPanelTitle: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         expandIcon: IconValue;
         collapseIcon: IconValue;
         hideActions: boolean;
@@ -209,7 +209,7 @@ export declare const VExpansionPanelTitle: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         readonly: boolean;
     } & {
         class?: any;
@@ -251,7 +251,7 @@ export declare const VExpansionPanelTitle: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     expandIcon: IconValue;
     collapseIcon: IconValue;
     hideActions: boolean;
@@ -260,7 +260,7 @@ export declare const VExpansionPanelTitle: {
     ripple: boolean | {
         class?: string | undefined;
         keys?: string[] | undefined;
-    } | undefined;
+    };
     readonly: boolean;
 } & {
     class?: any;

package/lib/components/VExpansionPanel/VExpansionPanels.d.ts

@@ -213,7 +213,7 @@ export declare const makeVExpansionPanelsProps: <Defaults extends {
 };
 export declare const VExpansionPanels: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         tile: boolean;
         tag: string | import("../../util/index.js").JSXComponent;
         multiple: boolean;
@@ -227,7 +227,7 @@ export declare const VExpansionPanels: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         readonly: boolean;
         flat: boolean;
         variant: "accordion" | "default" | "inset" | "popout";
@@ -293,7 +293,7 @@ export declare const VExpansionPanels: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         tile: boolean;
         tag: string | import("../../util/index.js").JSXComponent;
         multiple: boolean;
@@ -307,7 +307,7 @@ export declare const VExpansionPanels: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         readonly: boolean;
         flat: boolean;
         variant: "accordion" | "default" | "inset" | "popout";
@@ -364,7 +364,7 @@ export declare const VExpansionPanels: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     tile: boolean;
     tag: string | import("../../util/index.js").JSXComponent;
     multiple: boolean;
@@ -378,7 +378,7 @@ export declare const VExpansionPanels: {
     ripple: boolean | {
         class?: string | undefined;
         keys?: string[] | undefined;
-    } | undefined;
+    };
     readonly: boolean;
     flat: boolean;
     variant: "accordion" | "default" | "inset" | "popout";

package/lib/components/VFab/VFab.d.ts

@@ -415,7 +415,7 @@ export declare const makeVFabProps: <Defaults extends {
 };
 export declare const VFab: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         order: string | number;
         absolute: boolean;
         density: import("../../composables/density.js").Density;
@@ -436,7 +436,7 @@ export declare const VFab: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         transition: string | boolean | (import("vue").TransitionProps & {
             component?: import("vue").Component | undefined;
         }) | null;
@@ -534,7 +534,7 @@ export declare const VFab: {
         M: {};
         Defaults: {};
     }, {
-        style: import("vue").StyleValue;
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
         order: string | number;
         absolute: boolean;
         density: import("../../composables/density.js").Density;
@@ -555,7 +555,7 @@ export declare const VFab: {
         ripple: boolean | {
             class?: string | undefined;
             keys?: string[] | undefined;
-        } | undefined;
+        };
         transition: string | boolean | (import("vue").TransitionProps & {
             component?: import("vue").Component | undefined;
         }) | null;
@@ -644,7 +644,7 @@ export declare const VFab: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<{
-    style: import("vue").StyleValue;
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
     order: string | number;
     absolute: boolean;
     density: import("../../composables/density.js").Density;
@@ -665,7 +665,7 @@ export declare const VFab: {
     ripple: boolean | {
         class?: string | undefined;
         keys?: string[] | undefined;
-    } | undefined;
+    };
     transition: string | boolean | (import("vue").TransitionProps & {
         component?: import("vue").Component | undefined;
     }) | null;