ci: release

Author: Justin Kimbrell

.changeset/dark-pears-turn.md

@@ -0,0 +1,5 @@
+---
+"@vue-interface/modal": patch
+---
+
+Fixed escape keybinding and default backdrop color

packages/modal/src/Modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, FunctionalComponent, onMounted, onUnmounted, ref, watchEffect, useAttrs, type Component, type RenderFunction } from 'vue';
+import { computed, FunctionalComponent, onMounted, onUnmounted, ref, useAttrs, watch, watchEffect, type Component, type RenderFunction } from 'vue';
 import CheckCircleIcon from '../src/CheckCircleIcon.vue';
 import ExclamationCircleIcon from '../src/ExclamationCircleIcon.vue';
 import ExclamationTriangleIcon from '../src/ExclamationTriangleIcon.vue';
@@ -156,6 +156,25 @@ function onClickTrigger() {
     }
 }
 
+function onEsc(e: KeyboardEvent) {
+    if(e.code === 'Escape') {
+        close();
+    }
+}
+
+watch(showing, () => {
+    if(!props.dismissable) {
+        return;
+    }
+
+    if(showing.value) {
+        window.addEventListener('keydown', onEsc);
+    }
+    else if(!showing.value) {
+        window.removeEventListener('keydown', onEsc);
+    }
+})
+
 onMounted(() => {
     mounted.value = props.show;
     

packages/modal/src/css/modal.css

@@ -27,8 +27,8 @@
     --modal-backdrop-z-index: 1;
     --modal-backdrop-width: 100%;
     --modal-backdrop-height: 100%;
-    --modal-backdrop-background-color: color-mix(in oklch, var(--color-neutral-500, oklch(55.3% 0.013 58.071)) 75%, transparent);
-    --modal-backdrop-dark-background-color: color-mix(in oklch, var(--color-neutral-800, oklch(26.8% 0.007 34.298)) 75%, transparent);
+    --modal-backdrop-background-color: color-mix(in oklch, var(--color-neutral-950, oklch(55.3% 0.013 58.071)) 75%, transparent);
+    --modal-backdrop-dark-background-color: color-mix(in oklch, var(--color-neutral-950, oklch(26.8% 0.007 34.298)) 75%, transparent);
 
     /* Modal Container */
     --modal-container-position: relative;