use backdrop: selector

Author: aggre

.preview/src/env.d.ts

@@ -1 +1 @@
-import '../.astro/types.d.ts'
+/// <reference path="../.astro/types.d.ts" />

eslint.config.mjs

@@ -23,6 +23,7 @@ export default tseslint.config(
 		rules: {
 			'functional/prefer-immutable-types': 'warn',
 			'no-unused-vars': 'off',
+			'@typescript-eslint/triple-slash-reference': 'warn',
 		},
 	},
 	{

src/ui/components/Modal.vue

@@ -46,10 +46,9 @@ html:has(dialog[open]) {
 	<div>
 		<dialog
 			ref="dialog"
-			class="fixed inset-0 flex items-center justify-center overflow-y-auto"
+			class="fixed inset-0 flex items-center justify-center overflow-y-auto backdrop:bg-black/60"
 			:class="{ hidden: !isVisible }"
 		>
-			<div class="fixed inset-0 bg-black/60"></div>
 			<Transition>
 				<div class="relative m-auto w-full py-4">
 					<component